浏览器通过pdf的url打印

102 阅读1分钟

下面有两种打印方法,

缺点:①只能打印单个文件,就是说无法批量打印。 ②把url换成word的可以吗,不能,直接变成下载word了。

其他打印方案,lodop、electron等可以静默打印的,是需要用户安装软件的。不说了。

原生打印

<template>

  <div>

    <button @click="printAllPDFs">打印PDF</button>

    <iframe

      v-for="(pdf, index) in pdfFiles"

      :key="index"

      :src="pdf"

      style="display:none;"

    ></iframe>

  </div>

</template>

  


<script>

export default {

  data() {

    return {

    }

  },

  methods: {

    printAllPDFs() {

      const pdfUrl = ''


      const baseFileUrl = process.env.VUE_APP_FILE_URL

      const printUrl = baseFileUrl + pdfUrl

      let printFrame = document.createElement('iframe')

      printFrame.setAttribute('style', 'display:none')

      printFrame.src = printUrl

      console.log(printFrame)

      document.body.appendChild(printFrame)

      printFrame.onload = () => {

        // 调用这步来实现 iframe窗口中的打印

        printFrame.contentWindow.print()

      }

    }

  }

}

</script>

vue-print-nb打印(preview设置成false就打印不了,preview设置为true会在网页内预览,然后点打印又在浏览器弹窗预览,无力吐槽...)

<template>

  <button v-print="printObj">Print local range</button>

</template>

  


<script>

import print from 'vue-print-nb'

  


export default {

  directives: {

    print

  },

  data() {

    return {

      printObj: {

        url: 'pdf',

        preview: true, // 这个好像是预览

        previewTitle: 'Test Title', // The title of the preview window. The default is 打印预览

        previewBeforeOpenCallback(vue) {

          console.log('正在加载预览窗口')

        },

        previewOpenCallback(vue) {

          console.log('已经加载完预览窗口')

        },

        beforeOpenCallback(vue) {

          console.log('打开之前')

        },

        openCallback(vue) {

          console.log('执行了打印')

        },

        closeCallback(vue) {

          console.log('关闭了打印工具')

        }

      }

    }

  }

}

</script>