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


相关推荐
易知微EasyV数据可视化几秒前
Web+游戏引擎模式:设计的跨界协同最优解 | 数字孪生实战训练营·设计篇
前端·经验分享·游戏引擎·数字孪生·空间智能
羊羊小栈6 分钟前
农业病害知识管理系统(基于前后端Web开发)
前端·人工智能·毕业设计·大作业
武子康8 分钟前
调查研究-156 Vercel 全栈应用 前端零配置极速上线:Serverless + 边缘网络 + CI/CD 全栈实战
前端·网络·ci/cd·ai·云原生·serverless·vecel
码云骑士9 分钟前
Chrome插件开发实战指南:从零到上架
前端·chrome·microsoft
kiritomzzz13 分钟前
Vue 插槽(Slot)全解析:从 Vue2 到 Vue3 核心用法与案例
前端·javascript·vue.js
喵了几个咪14 分钟前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·架构
weixin_427771611 小时前
css加载顺序导致本地和线上样式不一致
前端·css
漂流瓶jz8 小时前
Webpack如何实现万物皆可import?loader的使用/配置/手写实践
前端·javascript·webpack
ZC跨境爬虫9 小时前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互