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


相关推荐
专业程序开发源8 分钟前
django新闻推荐系统70655-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·django·课程设计
acd1200922 分钟前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
vx_Biye_Design24 分钟前
springboot一站式旅游管理平台81037-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·课程设计·express·旅游
vx_Biye_Design33 分钟前
springboot宠物寄养服务预约与监管系统82684-计算机课程设计、毕业设计
java·vue.js·spring boot·elasticsearch·课程设计·express·宠物
vx_Biye_Design1 小时前
springboot小学生英语学习APP62773-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·学习·课程设计
vx_Biye_Design2 小时前
expressDeepSeek社团咨询助手的学生社团管理系统60746-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·课程设计·express
传人2 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
vx_Biye_Design2 小时前
springboot宠物领养与救助平台64334-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·mysql·课程设计·宠物
vx_Biye_Design2 小时前
django就业信息推荐系统61953-计算机课程设计、毕业设计
java·vue.js·spring boot·python·架构·django·课程设计
羲云2 小时前
给 Vue 页面加个 Markdown 编辑器:ME.js 的接入、图片粘贴与音视频
javascript·vue.js