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


相关推荐
meilindehuzi_a9 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js
csdn2015_9 小时前
vue 前端运行命令
前端·javascript·vue.js
swipe9 小时前
02|从 `pnpm dev` 到 Spring Boot 启动:后端服务到底怎么跑起来?
前端·后端·全栈
swipe9 小时前
01|前端人第一次打开 Spring Boot 项目,应该先看哪里?
前端·后端·全栈
阿懂在掘金9 小时前
做命令式弹窗工具应该考虑什么——我为什么把 vue-layerx 设计成这样
前端·前端框架·函数式编程
太平洋月光10 小时前
AI 快捷指令:Cursor Rules · Commands · Skills
前端·ai编程
用户831348593069810 小时前
Cesium 实现行政区反向遮罩镂空效果(自定义暗色蒙层+矢量/影像底图切换)
vue.js·webgl·cesium
默_笙10 小时前
😁 LLM 不知道的事它不会说"不知道",而是会"编"——RAG 就是让它闭嘴先查资料
前端·javascript
stringwu10 小时前
用 LangGraph 落地飞书 Bug 自动修复 Agent 实践
前端
Revolution6110 小时前
变量提升到底提升了什么:为什么 var 是 undefined,let 却直接报错
前端·javascript