print.js使用记录

使用print.js记录

npm安装

main.js的引入部分略过

<el-button @click="outputPrint()">打印</el-button>

方法：

    outputPrint() {

      printJS({

        printable: this.$refs['print'],

        type: 'html',

        targetStyles: ['*']

      })

      // this.$print({printable: this.$refs['print'], type: 'html',targetStyles: ['*']})

      // printJS或者this.$print都行，二者等价

    }

使用前提：复制要打印部分的div到当前页面，赋ref，如ref="print"，即只能打印当前页面的内容（其他页面的ref我拿不到）
script中引入import printJS from 'print-js'

①背景颜色不显示解决：在样式中加入

*{

  -webkit-print-color-adjust: exact;

}

②之前css样式不显示，当时是

printJS({

        printable: this.$refs['print'],

        type: 'html',

        css: '@/aaa/bbb',

        scanStyles: false,

        targetStyles: ['*']

      })

这样报错说是找不着css，然后发现寻找的路径是localhost加上@/aaa/bbb

然后把css和scanStyle删掉就好了，直接用上本地的样式

=====================我是分界线=====================================

封装了公共方法：

import printJS from 'print-js'

/**

 *

 * @desc   使用print.js进行打印

 * @param  传个dom，如$refs['print']，不能用id和class，据说打包会出错

 */

export function outputPrint(dom) {

  printJS({

    printable: dom,

    type: 'html',

    targetStyles: ['*']

  })

}

最后，官方：Print.js - Javascript library for HTML elements, PDF and image files printing.