项目场景:

由于甲方要求,项目需要打印二维码标签,故开发此功能


开发流程

  1. 安装包:npm install print-js --save
  2. print-js的使用
  3. <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: '',


GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐