vue 打印

作者: yonglei_shang | 来源:发表于2019-04-11 10:53 被阅读6次

    附上 print.js 地址: print.js

    1、注册插件

     import Print from '@plugin/print'
    Vue.use(Print)
    

    1.1. HTML设置ref,可指定区域打印

    <template>
    <section ref="print">
        打印内容
        <div class="no-print">不要打印我</div>
    </section>
    </template>
    

    注意事项,需使用ref获取dom节点,若直接通过id或class获取,则webpack打包部署后打印内容为空。

    1.2. 指定不打印区域

    方法一. 添加no-print样式类

    <div class="no-print">不要打印我</div>
    

    方法二. 自定义类名

    <div class="do-not-print-me-xxx">不要打印我</div>
    this.$print(this.$ref.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
    

    1.3. 打印

    this.$print(this.$refs.print) // 使用

    2、当打印的内容包含 canvas

    使用 print.js 打印需要将 canvas 转为 img, 下面是在使用时转换方法示例

    canvasSwitchImg () {
          let mainContent = this.$refs.print.$refs.mainContent
          let canvas = mainContent.querySelectorAll('.canvas-pdf')
          let box = mainContent.querySelectorAll('.pdf-box')
          if (canvas.length > 0) {
            for (let i = 0; i < canvas.length; i++) {
              let img = document.createElement('img')
              let url = canvas[i].toDataURL()
              img.src = url
              box[i].replaceChild(img, canvas[i])
            }
          }
        }
    

    打印

    print () {
        this.canvasReset()
        this.$print(this.$refs.print.$refs.mainContent)
    }
    

    相关文章

      网友评论

        本文标题:vue 打印

        本文链接:https://www.haomeiwen.com/subject/chgziqtx.html