当前位置: 首页 > news >正文

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.lryc.cn/news/148237.html

相关文章:

  • 20230830比赛总结
  • DNS指向别名还是IP
  • 【考研数学】概率论与数理统计 —— 第二章 | 一维随机变量及其分布(1,基本概念与随机变量常见类型)
  • CSS判断手机暗黑模式
  • 【java中的Set集合】HashSet、LinkedHashSet、TreeSet(最通俗易懂版!!)
  • python中的文件操作
  • spark支持深度学习批量推理
  • 代码随想录打卡—day52—【子序列问题】— 8.31 最大子序列
  • gcc4.8.5升级到gcc4.9.2
  • Golang 中的 archive/zip 包详解(三):常用函数
  • 微服务架构七种模式
  • 关于CICD流水线的前端项目运行错误,npm项目环境配置时出现报错:Not Found - GET https://registry.npm...
  • element-plus的周选择器 一周从周一开始
  • Android 9.0 pms获取应用列表时过滤掉某些app功能实现
  • HTML <thead> 标签
  • 谷歌发布Gemini以5倍速击败GPT-4
  • 力扣92. 局部反转链表
  • 九、适配器模式
  • 使用spring自带的发布订阅来实现发布订阅
  • Walmart电商促销活动即将开始,如何做促销活动?需要注意什么?
  • Matlab(画图进阶)
  • 人生的回忆
  • Spring之依赖注入源码解析
  • 5G NR:RACH流程-- Msg1之生成PRACH Preamble
  • 高基数类别特征预处理:平均数编码 | 京东云技术团队
  • 高效利用隧道代理实现无阻塞数据采集
  • 图论岛屿问题DFS+BFS
  • Cypress web自动化windows环境npm安装Cypress
  • CentOS7.9设置ntp时间同步
  • 36、springboot --- 对 tomcat服务器 和 undertow服务器 配置访客日志