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: '',


相关推荐
派小心.4 分钟前
React StrictMode埋点双执行的验收方法
前端·前端框架
IT_陈寒12 分钟前
Python的GIL锁让我把多线程代码全重写了!
前端·人工智能·后端
百度一下吧20 分钟前
umi后台管理项目实战:从工程搭建到生产构建
java·前端·javascript
haerapi21 分钟前
仓库拣货路线不只靠最短边:S 形启发式的反例记录
android·开发语言·javascript
派小心.27 分钟前
App埋点排查:iOS冷启动事件漏报先看初始化还是上报
前端·数据分析
事圆则缓37 分钟前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
peter676839 分钟前
css揭秘-背景和边框
前端·css
5008442 分钟前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
派小心.1 小时前
小程序埋点验收:自定义事件上报后页面参数怎么核对
前端·数据分析
500842 小时前
React Native for OpenHarmony 实战:三方库 react-native-device-uptime 的鸿蒙化适配指南
javascript·分布式·react native·react.js·harmonyos