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


相关推荐
柒和远方7 小时前
LeetCode 4. 寻找两个正序数组的中位数 —— 二分划分的艺术
javascript·python·算法
金色的暴发户7 小时前
一劳永逸解决Codex手机验证
前端·人工智能·开源
默_笙7 小时前
😢 我被 JS 的 this 整不会了:同一个函数,换个“地区”调用,结果就不一样
javascript
DanCheOo7 小时前
AI 应用的可观测性:你的 AI 系统在生产上到底表现怎么样
前端·openai
Hyyy7 小时前
流式渲染用react-markdown还是Vercel/Streamdown
前端
Tom@敲代码7 小时前
js学习笔记-01
javascript·笔记·学习
风中的小甜瓜8 小时前
ASP.NET Page 那点事
java·前端·asp.net
木西8 小时前
告别机械重复:使用 Node.js + Playwright 构建 24 小时全自动测试网领水脚本
前端·javascript·node.js
不好听6138 小时前
JavaScript Promise 从入门到精通(一):为什么需要 Promise 以及它是什么
javascript
西柚小萌新8 小时前
【论文写作】--LaTeX详细入门教程2
前端·html