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 分钟前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩2 分钟前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序
进击的丸子8 分钟前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范
进击的丸子9 分钟前
代理网络环境下 Linux Pro 在线激活实操指南
javascript·后端·安全
开开心心就好12 分钟前
本地文件搜索工具,双击Ctrl就能呼出搜索
java·服务器·前端·支持向量机·ffmpeg·音视频·模拟退火算法
知了清语23 分钟前
SVG 缩放预览:F12 无法定位子元素 & 放大模糊
前端
AN24 分钟前
一个人,带着一群 AI:一个 10 年前端如何做出几十个团队在用的在线文档
前端
ByteCoder.24 分钟前
班前十分钟的清单,按体检引导单来写
java·服务器·前端·助播虾
小大宇34 分钟前
vue知识点9-标签上的ref
前端·javascript·vue.js
艺杯羹35 分钟前
告别大模型滥用与延迟失控:确定性优先法则与本地规则引擎实战
前端·人工智能·系统架构