Vue中实践使用PDFJS实现预览打印PDF文件

1、将PDFjs的依赖文件存放在public文件夹下的static文件夹下

静态文件地址

链接: https://pan.baidu.com/s/1UUHarsiNwhiL9v_LfS8x4Q 提取码: ohm1

2、书写组件

<template>
    <iframe  :src="pdfUrl" width="100%" :height="clHeight"></iframe>
</template>

<script>
import axios from 'axios'
import store from '@/store/'
export default {
  name: 'PDFDetail',
  data() {
    return {
      data: [],
      pdfUrl: '',
      showPDFModal: false,
      id: '',
      clHeight:'980px'
    }
  },
  mounted() {
    this.clHeight = document.body.clientHeight + 'px'
  },
  methods: {
    // 初始化获取pdf文件
    getPdfCode(alarmId) {
      let that = this;
      let urlBase = process.env.VUE_APP_API_BASE_URL
      let token = store.getters.token
      axios({
        method: 'get',
        url: urlBase + '/alarm/handle/export' + "?id=" + alarmId,
        headers: {
          'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          'X-Access-Token': token
        },
        responseType: 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
      }).then(response => {
        that.pdfUrl = that.getObjectURL(response.data);
      }).catch(function (error) {
        console.log(error);
      });
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {

        }
      } else if (window.URL != undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file);
        } catch (error) {
        }
      }
      return url;
    },
  },
}
</script>

<style lang='less' scoped>
</style>

 3、将该组件注册为BlankLayout组件，在新的窗口打开。

4、需要自己根据实际情况修改部分代码即可。