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


相关推荐
Kagol7 分钟前
Superpowers GSD gstack AgentSkills深度测评
前端·人工智能
excel1 小时前
JavaScript 字符串与模板字面量:从表象到本质理解
前端
京东云开发者1 小时前
当AI成为导演-如何用AI创作动漫短剧
前端
李白的天不白2 小时前
使用 SmartAdmin 进行前后端开发
java·前端
乘风gg2 小时前
🤡PUA AI Coding 工具 的 10 条终极语录
前端·ai编程·claude
学Linux的语莫2 小时前
Vue 3 入门教程
前端·javascript·vue.js
怕浪猫3 小时前
第一章、Chrome DevTools Protocol (CDP) 详解
前端·javascript·chrome
kyriewen3 小时前
从本地到生产:迁移到 GitHub Actions 自动化 CI/CD,总结了这 5 个坑
前端·github·自动化运维
雨季mo浅忆3 小时前
首个Vue3项目边写边学边记
前端·vue3
IT_陈寒4 小时前
React中useEffect依赖项这个坑我居然踩了三天
前端·人工智能·后端