vue使用打印组件print-js

项目场景:

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


开发流程

  1. 安装包:npm install print-js --save
  2. print-js的使用
html 复制代码
<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: '',


相关推荐
程序员修心12 小时前
CSS浮动与表格布局全解析
前端·html
登山人在路上12 小时前
Vuex构建可维护的 Vue.js 状态管理
vue.js
登山人在路上12 小时前
Pinia :下一代 Vue 状态管理
vue.js
POLITE312 小时前
Leetcode 238.除了自身以外数组的乘积 JavaScript (Day 7)
前端·javascript·leetcode
光影少年12 小时前
AI前端开发需要会哪些及未来发展?
前端·人工智能·前端框架
Vincent_Vang13 小时前
多态 、抽象类、抽象类和具体类的区别、抽象方法和具体方法的区别 以及 重载和重写的相同和不同之处
java·开发语言·前端·ide
菩提小狗13 小时前
小迪安全_第4天:基础入门-30余种加密编码进制&Web&数据库&系统&代码&参数值|小迪安全笔记|网络安全|
前端·网络·数据库·笔记·安全·web安全
闲蛋小超人笑嘻嘻13 小时前
非父子通信: provide和inject
前端·javascript·vue.js
周亚鑫13 小时前
vue3 js代码混淆
开发语言·javascript·ecmascript
止观止13 小时前
不止解构:深入掌握 ES6+ 对象与函数的高级语法糖
前端·javascript·es6