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


相关推荐
yma1610 分钟前
从零搭建 P2P 聊天室:yma16.cloud 在线工具实战
前端·1024程序员节
Mr.Pascal1 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain1 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
思码梁田1 小时前
CSS 浏览器厂商前缀:从「写 5 遍」到现代自动化兼容
前端·css·css3·border-radius·1024程序员节·box-shadow·厂商前缀
Bug收容所2 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节
iCxhust2 小时前
如何实时同步自己的工作日志,在不同的设备间
前端·软件工程·1024程序员节·同步日志
IT_陈寒2 小时前
React项目实战经验分享:如何避免useEffect闭包陷阱导致的陈旧状态问题?
前端·人工智能·后端
风骏时光牛马2 小时前
智能任务调度Agent
前端
小羊没烦恼!2 小时前
.NET无侵入自动化探针原理和主流实现
运维·开发语言·javascript·python·自动化·.net·1024程序员节