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


相关推荐
Captaincc13 分钟前
置身钉内:一个 AI 办公产品的理想、失焦与组织困境
前端·程序员
零陵上将军_xdr23 分钟前
后端转全栈学习-Day6-JavaScript 基础-4
前端·javascript·学习
川冰ICE25 分钟前
JavaScript实战②|电商网站交互效果,轮播图与购物车
开发语言·javascript·交互
凌云拓界31 分钟前
状态机与思考循环 ——CogitoAgent开发实战(一)
javascript·人工智能·架构·node.js·设计规范
sugar__salt37 分钟前
Bun 新一代 JavaScript/TypeScript 运行时:从入门到实战
开发语言·javascript·typescript
梦幻通灵1 小时前
Vue3 Element日期控件置灰明天之后日期
前端·javascript·vue.js
lzhdim1 小时前
C盘空间多出来4GB:谷歌服软 Chrome本地AI大模型可禁用、删除了
前端·人工智能·chrome
Monkery1 小时前
WWDC26 全面汇总
前端·人工智能
ANnianStriver1 小时前
PetLumina 03 — 后端目录重构与 Web 管理后台搭建
java·前端·ai·重构·ai编程·claude code
晓13131 小时前
【Cocos Creator 3.x】篇——第一章 简介
前端·javascript·游戏引擎