vue-pdf实现预览pdf文件以及含有电子印章的pdf文件

话不多说，上代码~

1.页面：

2.js相关代码

    click() {
          this.isShow= true
          const name = this.file.name.substr(0, this.file.name.lastIndexOf('.'))
          // http://10.20.61.94:81/dev-api/seal/batchStamp/download?filePath=/ofd/20220509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd&remotePath=N/A&fileName=0
          const baseURL = process.env.VUE_APP_BASE_API
          const baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI(this.file.fileSignPath) + '&remotePath=' + 'N/A' + '&fileName=' + name
          //const baseUrl = baseURL + '/seal/batchStamp/download' + '?filePath=' + encodeURI('/ofd/20220509/f7cc4fdb82431d356e8145fdd483405fb5043a9d.ofd') + '&remotePath=' + 'N/A' + '&fileName=' + '0'
          var xhr = new XMLHttpRequest()
          xhr.open('get', baseUrl, true) // get、post都可
          xhr.responseType = 'blob' // 转换流
          xhr.setRequestHeader('Authorization', 'Bearer ' + getToken()) // token键值对
          let that = this
          xhr.onload = function() {
            if (this.status == 200) {
              var blob = this.response
              that.src = window.URL.createObjectURL(blob)
              // const binaryData = [];
              // binaryData.push(this.response);
              // let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
              // that.src = url
            }
          }
          xhr.send()
        },
        // pdf加载时
        loadPdfHandler(e) {
          this.currentPage = 1; // 加载的时候先加载第一页
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
          this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
        },
        //  上一页
        prev() {
          if (this.currentPage > 1) {
            this.currentPage--;
          }
        },
        // 下一页
        next() {
          if (this.currentPage < this.pageCount) {
            this.currentPage++;
          }
        },
        //放大
        scaleD() {
          if(this.scale == 100) return this.$message.warning('已经是最大喽~~')
          this.scale += 10;
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
          this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
        },
        //缩小
        scaleX() {
          if(this.scale == 40) return this.$message.warning('已经是最小喽~~')
          this.scale += -10;
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
          this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
        },
        // 顺时针
        clockwise() {
          this.pageRotate += 90;
        },
        // 逆时针
        antiClockwise() {
          this.pageRotate -= 90;
        },
        print() {
          this.$refs.pdf.print()

        },

注意啦：如果想预览带电子签章的pdf，还需改一些代码：

1.找到node_modules/pdfjs-dist/build/pdf.worker.js注释一行代码

 2.找到node_modules/pdfjs-dist/es5/pdf.worker.js注释一行代码

注意，注意！！！

预览pdf时，总会遇到pdf中的中文无法显示的问题，多见于票据、合同之类的pdf,如何解决这个问题，以下为解决办法：

1.复制cmap文件到/static，直接引用。

this.url= pdf.createLoadingTask({ 
     url: 'http://localhost/11.pdf',
     cMapUrl: '../../../../static/cmaps/', 
     cMapPacked: true
  })

cmap的路径为：node_modules\vue-pdf\node_modules\pdfjs-dist\cmaps

但是这种方式我貌似没试成功，或许还是因为我的pdfjs-dist的版本问题

2.访问固定的cMap地址

 但是这样，如果内网环境下是无法访问的，访问这个官网，也没提供下载功能，所以我觉得可以按照这个版本，下载对应的pdfjs-dist,然后再引入对应的cMap，或许就可以啦

ps:为了避免高版本语法的不兼容性，可以使用无草案版本的pdfjs-dist：2.0.943