vue使用打印组件print-js

news2024/11/20 12:26:47

项目场景:

由于甲方要求,项目需要打印二维码标签,故开发此功能


开发流程

  1. 安装包:npm install print-js --save
  2. print-js的使用
  3. <template>
        <div  id="print" ref="print" >
    
            <p>打印内容<p>
        </div>
    //打印按钮
        <el-button type="success" @click='doPrint'>打印</el-button>
    
    </template>
    
    <script>
    //打印组件
    import print  from 'print-js'
    export default {
     methods: {
        doPrint() {
          printJS({
              printable: "print",
              type:'html',
              targetStyles:['*'],
              style:"@page {margin:2.4cm 2cm ;resolution: 300dpi;}",
              onPrintDialogClose: this.erexcel=false,
              targetStyles: ["*"], // 使用dom的所有样式,很重要
              //解决字体样式失效的问题
              font_size: '',
            })
            },
        }
    }
    </script>
    

问题描述

例如:在打印过程中会出现字体样式失效的问题:

         加入这行代码即可 font_size: '',


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/955268.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

可拖拽编辑的流程图X6

先上图 //index.html&#xff0c;有时候可能加载失败&#xff0c;那就再找一个别的cdn 或者npm下载&#xff0c;如果npm下载&#xff0c; //那么需要全局引入或者局部引入&#xff0c;代码里面写法也会不同&#xff0c;详细的可以看示例<script src"https://cdn.jsdeli…

python可视化——pycharm——Grid - Grid_overlap_multi_xy_axis图

这段代码使用了pyecharts库来创建一个Grid-Overlap图&#xff0c;包括柱状图和折线图。 首先&#xff0c;创建了一个柱状图对象bar&#xff0c;并添加了两个y轴的数据。第一个y轴代表csdn博客数量&#xff0c;第二个y轴代表粉丝数量。然后&#xff0c;使用extend_axis方法扩展…

6、深入解析Kotlin类与对象:构造、伴生、单例全面剖析

前言 本篇文章将带您了解Kotlin编程中的重要概念&#xff1a;类及构造函数、访问修饰符、伴生对象和单例模式。就像搭积木一样&#xff0c;我们会逐步揭开这些概念的面纱&#xff0c;让您轻松理解它们的作用和用法。无论您是编程新手还是有经验的开发者&#xff0c;本文都将为…

一个独立的测试人如何完成一个项目的测试 + 发布

其实啊&#xff0c;每个人都可以「独立完成一个项目的测试 发布」 很多同学&#xff0c;工作了五六年&#xff0c;都没有机会&#xff08;也许是&#xff1a;不敢&#xff09;独立负责一个完整项目的测试&#xff08;独立负责一个项目测试后的上线流程&#xff0c;机会就更少…

手把手教你调用5个公共API获取数字货币市场数据(内附详细源码)

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

three.js(十):线性几何体

线性几何体 WireframeGeometry 网格几何体EdgesGeometry 边缘几何体 WireframeGeometry 网格几何体 WireframeGeometry( geometry : BufferGeometry ) geometry — 任意几何体对象。 const geometry new SphereGeometry(); const wireframe new WireframeGeometry(geometr…

2022年06月 C/C++(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;逃离迷宫 你在一个地下迷宫中找到了宝藏&#xff0c;但是也触发了迷宫机关&#xff0c;导致迷宫将在T分钟后坍塌&#xff0c;为此你需要在T分钟内逃离迷宫&#xff0c;你想知道你能不能逃离迷宫。迷宫是一个边长为m的正方形&#xff0c;其中"S"表示…

完善会计流程的关键功能:了解必备的会计软件功能!

会计软件已经成为许多大小企业的财务管理标配。会计软件可以帮助企业自动化财务流程&#xff0c;提高工作效率&#xff0c;减少错误&#xff0c;并提供准确和可靠的财务数据。一款合格的会计软件应该具备什么功能呢&#xff1f; 会计软件应有的功能 1、账户管理&#xff1a;会…

overlayfs

参考&#xff1a;How containers work: overlayfs how overlays work Overlay filesystems, also known as “union filesystems” or “union mounts” let you mount a filesystem using 2 directories: a “lower” directory, and an “upper” directory. Basically: t…

C语言之练习题

欢迎来到我的&#xff1a;世界 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言填空题&#xff1a;第一题第二题第三题第四题 编程题&#xff1a;第一题&#xff1a;第二题&#xff1a; 总结 前言 填空题&#xff1a; …

网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC

文章目录 网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC1. 网御ACM上网行为管理系统简介2.漏洞描述3.影响版本4.fofa查询语句5.漏洞复现6.POC&EXP7.整改意见8.往期回顾 网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC 免责声明&am…

three.js(九):内置的路径合成几何体

路径合成几何体 TubeGeometry 管道LatheGeometry 车削ExtrudeGeometry 挤压 TubeGeometry 管道 TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean) path — Curve - 一个由基类Curve继承而来的3D路径。 De…

关于Linux系统时间的问题

关于Linux系统时间的问题 当我们进行一些特定的业务需求时&#xff0c;需要修改当前Linux系统的系统时间。我们可以用以下命令进行修改时间。 data -s "2022-08-31 15:00:00"当我们将时间设置为某个时间点后&#xff0c;Linux系统的时间会出现一个问题&#xff1a;…

React原理 - React Reconciliation-上

目录 扩展学习资料 React Reconciliation Stack Reconciler【15版本、栈协调】 Stack Reconciler-事务性 事务性带来的弊端&#xff1a; 扩展学习资料 名称 链接 备注 官方文档 Reconciliation – React 英文 stack reconciler Implementation Notes – React 英文…

IntelliJ IDEA 2023.2.1使用Git时弹出“使用访问令牌登录”问题解决

这里写目录标题 一、内网Git环境GitLabGogsGitea 二、外网Git环境GitHubGitee 升级为IntelliJ IDEA 2023.2.1后&#xff0c;使用Git时弹出“使用访问令牌登录”的窗口&#xff0c;习惯使用Git帐号密码登录的用户&#xff0c;面对这个突如其来的弹窗真的很懵。 一、内网Git环境 …

虚拟化技术原理

计算虚拟化 介绍 把物理主机上物理资源&#xff08;CPU&#xff0c;内存&#xff0c;IO外设&#xff09;&#xff0c;通过虚拟化层抽象成超量、等量的逻辑资源&#xff08;虚拟CPU&#xff0c;虚拟内存&#xff0c;虚拟IO设备&#xff09;&#xff0c;然后重新组合形成新的虚…

大数据学习:impala基础

impala基础 1. impala介绍 1.1 impala概述 Impala是Cloudera公司推出&#xff0c;提供对HDFS、Hbase数据的高性能、低延迟的交互式SQL查询功能。官方测试性能比hive快10到100倍&#xff0c;其sql查询比sparkSQL还要更加快速&#xff0c;号称是当前大数据领域最快的查询sq工具…

【排序】快排非递归

模拟递归的下标&#xff0c;让他们入栈