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


相关推荐
咔咔一顿操作1 天前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5
刘联其1 天前
.net也可以用Electron开发跨平台的桌面程序了
前端·javascript·electron
韩曙亮1 天前
【jQuery】jQuery 选择器 ④ ( jQuery 筛选方法 | 方法分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找 )
前端·javascript·jquery·jquery筛选方法
前端 贾公子1 天前
Node.js 如何处理 ES6 模块
前端·node.js·es6
pas1361 天前
42-mini-vue 实现 transform 功能
前端·javascript·vue.js
柒.梧.1 天前
从零搭建SpringBoot+Vue+Netty+WebSocket+WebRTC视频聊天系统
vue.js·spring boot·websocket
你的代码我的心1 天前
微信开发者工具开发网页,不支持tailwindcss v4怎么办?
开发语言·javascript·ecmascript
esmap1 天前
OpenClaw与ESMAP AOA定位系统融合技术分析
前端·人工智能·计算机视觉·3d·ai·js
毕设源码-钟学长1 天前
【开题答辩全过程】以 基于node.js vue的点餐系统的设计与实现为例,包含答辩的问题和答案
前端·vue.js·node.js
努力d小白1 天前
leetcode438.找到字符串中所有字母异位词
java·javascript·算法