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


相关推荐
小小小小宇1 分钟前
前端领域 30 个值得安装的 Agent Skills
前端
xkxnq4 分钟前
第八阶段:工程化、质量管控与高级拓展(132天),Vue项目文档自动化:VuePress搭建组件文档(组件示例+API说明)
javascript·vue.js·自动化
喵了几个咪5 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·javascript·架构
星栈7 分钟前
Makepad 不只是画界面:事件、状态和组件通信,到底怎么写
前端·rust
dsyyyyy11018 分钟前
只用HTML和CSS实现换一换效果
前端·css·html
didadida26221 分钟前
Isshin AI TextFlow_开发文档_第一回(事件提取)
javascript·ai编程
青山Coding22 分钟前
Cesium应用(七):地形开挖的实现思路
前端·cesium
风骏时光牛马24 分钟前
Verilog常见问题及代码易错点梳理
前端
用户21816970493026 分钟前
swift (一) var let 字符串 int double 元组 数组[] 字典[:] 可选类型 if while for 函数func 可选类型?
前端
铁皮饭盒28 分钟前
Bun 都用 AI + Rust 重写了,咋不顺便把 Node.js 的 API 全兼容了?
前端·后端