vue使用打印组件print-js

项目场景:

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


开发流程

  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.mzph.cn/news/61606.shtml

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

相关文章

树的介绍(C语言版)

前言 在数据结构中树是一种很重要的数据结构&#xff0c;很多其他的数据结构和算法都是通过树衍生出来的&#xff0c;比如&#xff1a;堆&#xff0c;AVL树&#xff0c;红黑色等本质上都是一棵树&#xff0c;他们只是树的一种特殊结构&#xff0c;还有其他比如linux系统的文件系…

CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

一、设置文件显示和搜索过滤步骤 为了提高搜索效率以及文件列表中隐藏不需要显示的文件&#xff0c; VS Code 需要设置排除目录用于过滤。 比如 cocoscreator 中&#xff0c;编辑器运行时会自动生成一些目录&#xff1a;build、temp、library&#xff0c; 所以应该在搜索中排除…

代码随想录算法训练营第五十一天 | 309.最佳买卖股票时机含冷冻期,714.买卖股票的最佳时机含手续费

代码随想录算法训练营第五十一天 | 309.最佳买卖股票时机含冷冻期&#xff0c;714.买卖股票的最佳时机含手续费 309.最佳买卖股票时机含冷冻期714.买卖股票的最佳时机含手续费 309.最佳买卖股票时机含冷冻期 题目链接 视频讲解 给定一个整数数组prices&#xff0c;其中第 pric…

Mysql-索引查询相关

一、单表查询 1.1 二级索引为null 不论是普通的二级索引&#xff0c;还是唯一二级索引&#xff0c;它们的索引列对包含 NULL 值的数量并不限制&#xff0c;所以我们采用key IS NULL 这种形式的搜索条件最多只能使用 ref 的访问方法&#xff0c;而不是 const 的访问方法 1.2 c…

并发编程的故事——并发之共享模型

并发之共享模型 文章目录 并发之共享模型一、多线程带来的共享问题二、解决方案三、方法中的synchronize四、变量的线程安全分析五、习题六、Monitor七、synchronize优化八、wait和notify九、sleep和wait十、park和unpark十一、重新理解线程状态十二、多把锁十三、ReentrantLoc…

Window11-Ubuntu双系统安装

一、制作Ubuntu系统盘 1.下载Ubuntu镜像源 阿里云开源镜像站&#xff1a;https://mirrors.aliyun.com/ubuntu-releases/ 清华大学开源软件镜像网站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 选择想要的版本下载&#xff0c;我用的是20.04版本。 2…

Facebook登录SDK

一、Facebook SDK接入 官方文档&#xff1a;https://developers.facebook.com/docs/facebook-login/android 按照流程填写完成 1、选择新建应用 如果已经创建了应用就点【搜索你的应用】&#xff0c;忽略2、3步骤 2、选择【允许用户用自己的Facebook账户登录】 3、填写应用…

Qt应用开发(基础篇)——消息对话框 QMessageBox

一、前言 QMessageBox类继承于QDialog&#xff0c;是一个模式对话框&#xff0c;常用于通知用户或向用户提出问题并接收答案。 对话框QDialog QMessageBox消息框主要由四部分组成&#xff0c;一个主要文本text&#xff0c;用于提醒用户注意某种情况;一个信息文本informativeTex…

Redis数据结构应用场景及原理分析

目录 一、Redis介绍 二、应用场景 2.1 String应用场景 2.2 Hash应用场景 2.3 List应用场景 2.4 Set应用场景 2.5 Zset应用场景 一、Redis介绍 单线程多路复用底层数据结构&#xff1a;全局哈希表&#xff08;key-value&#xff09; 二、应用场景 2.1 String应用…

VBA技术资料MF50:VBA_在Excel中突出显示前3个值

【分享成果&#xff0c;随喜正能量】人受到尊重&#xff0c;不是因为权钱&#xff0c;而是他骨子里透出的&#xff0c;正直与善良。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高…

ChatGPT 总结数据分析的所有知识点

ChatGPT功能非常多,特别是对某个行业,某个方向,某个技术进行总结那是相当专业的。 如下图。 直接用一个指令便总结出来数据分析当中的所有知识点内容。 AIGC ChatGPT ,BI商业智能, 可视化Tableau, PowerBI, FineReport, 数据库Mysql Oracle, Office, Python ,ETL Ex…

day01-ES6新特性以及ReactJS入门

课程介绍 ES6新特性ReactJS入门学习 1、ES6 新特性 1.2、let 和 const 命令 var 之前&#xff0c;我们写js定义变量的时候&#xff0c;只有一个关键字&#xff1a; var var 有一个问题&#xff0c;变量作用域的问题&#xff0c;作用域不可控&#xff0c;就是定义的变量有时会…

嵌入式开发之syslog和rsyslog构建日志记录

1.syslogd作客户端 BusyBox v1.20.2 (2022-04-06 16:19:14 CST) multi-call binary.Usage: syslogd [OPTIONS]System logging utility-n Run in foreground-O FILE Log to FILE (default:/var/log/messages)-l N Log only messages more urge…

自动化备份方案

背景说明 网上有很多教程&#xff0c;写的都是从零搭建一个什么什么&#xff0c;基本上都是从无到有的教程&#xff0c;但是&#xff0c;很少有文章提及搭建好之后如何备份&#xff0c;我觉得备份才是一个系统生命周期内永恒的主题&#xff0c;是一个值得花时间严肃对待的问题…

Leetcode328 奇偶链表

思路&#xff1a;分别处理奇偶&#xff0c;保存奇偶的第一个和最后一个节点&#xff0c;注意最后链接的时候需要把偶数的next去掉再拼接不然就成环了 class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head or not head.next or not head.next.ne…

设计模式--模板方法模式(Template Method Pattern)

一、什么是模板方法模式&#xff08;Template Method Pattern&#xff09; 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的实现延迟到子类中。模板方法模式允许在不改变算法的…

OpenCV c++ 使用imshow显示灰色窗口

OpenCV使用imshow显示灰色窗口 原因是使用了system(‘pause’);函数&#xff0c;只需要将该函数去掉&#xff0c;使用opencv中的对应函数 waitKey(0) 即可实现同样效果。 system(“pause”); 改为&#xff1a; cv::waitKey(0); 显示效果&#xff1a;

适配ADRC自抗扰控制算法的MFP450-ADRC 套件焕新而来

关注 FMT 开源自驾仪的开发者可能知道&#xff0c;早在 2018 年 7 月 FMT开源自驾仪的早期版本就已经实现了 ADRC 算法。 经过几年的发展&#xff0c;FMT 在自抗扰控制算法的适配上做了进一步的优化&#xff0c;为了方便科研工作者和开发者快速上手&#xff0c;我们针对搭载 F…

并发编程的故事——共享模型之内存

共享模型之内存 文章目录 共享模型之内存一、JVM内存抽象模型二、可见性三、指令重排序 一、JVM内存抽象模型 主要就是把cpu下面的缓存、内存、磁盘等抽象成主存和工作内存 体现在 可见性 原子性 有序性 二、可见性 出现的问题 t线程如果频繁读取一个静态变量&#xff0c;那…

解决Spring Data JPA中的NullPointerException问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…