记录vue-pdf文件流预览出现空白的问题

因为工作需要引用pdf插件，于是找到了vue-pdf，具体用法并不难，我先贴上代码：

先引入组件

import pdf from 'vue-pdf'

　布局如下：　

　　　　　　<pdf
            :src="pdfSrc"
            :page="pageNum"
            @progress="loadedRatio = $event"
            @num-pages="pageTotalNum = $event"
          />
          <div class="page-box">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                size="mini"
                @click="prePage"
              >上一页</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="nextPage"
              >下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
            </el-button-group>
            <div style=" color: #409EFF;display: flex;justify-content: flex-end;">
              {{ pageNum }} / {{ pageTotalNum }}
            </div>
          </div>

 具体执行代码如下：

 handlePrint() {
      if (this.selecttion.length !== 1) {
        this.$message.error('请选择一条数据导出')
        return
      }
      this.pdfDialog = true
      if (this.selecttion[0].costcode) {
        costInfoPdf({ costcode: this.selecttion[0].costcode }).then(res => {
          const blob = new Blob([res], { type: 'application/pdf;charset-UTF-8' }) // res--后台返回的文件流
          this.src = this.getObjectURL(blob)
          this.pdfSrc = pdf.createLoadingTask({
            url: this.src,
            cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
            cMapPacked: true
            // CMapReaderFactory
          })
        })
      }
    },
    getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) {
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (err) {
          console.info(err)
        }
      } else if (window.URL !== undefined) {
        try {
          url = window.URL.createObjectURL(file)
        } catch (err) {
          console.info(err)
        }
      }
      return url
    },
    prePage () {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页
    nextPage () {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },

以上便是具体用法代码。

下面便是问题：

其实我刚开始的时候并没有报错，只是warning：，但是经过追踪，才发现是这个错：

Failed to set the 'responseType' property on 'XMLH…ed for synchronous requests made from a document

　查询文档如下：

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open

1. async 可选
2. 一个可选的布尔参数，表示是否异步执行操作，默认为true。
3. 如果值为false，send()方法直到收到答复前不会返回。
4. 如果true，已完成事务的通知可供事件监听器使用。
5. 如果multipart属性为true则这个必须为true，否则将引发异常。
6. 注意：主线程上的同步请求很容易破坏用户体验，应该避免；实际上，许多浏览器已完全弃用主线程上的同步XHR支持。在 Worker中允许同步请求

重点

注意：主线程上的同步请求很容易破坏用户体验，应该避免；实际上，许多浏览器已完全弃用主线程上的同步XHR支持。在 Worker中允许同步请求

所以在使用XMLHttpRequest.open()的时候需要显示的定义三个参数而不是两个参数

当然也可以直接通过修改\node_modules\pdfjs-dist\es5\build\pdf.js第25608行达到想要的效果

key: "request",
    value: function request(args) {
      var xhr = this.getXhr();
      var xhrId = this.currXhrId++;
      var pendingRequest = this.pendingRequests[xhrId] = {
        xhr: xhr
      };
      xhr.open("GET", this.url); ----修改为---->xhr.open("GET", this.url, true); 
      xhr.withCredentials = this.withCredentials;
      for (var property in this.httpHeaders) {
        var value = this.httpHeaders[property];
        if (typeof value === "undefined") {
          continue;
        }
        xhr.setRequestHeader(property, value);
      }

 

当然这样之后，只是说可以实现了，空白不见了，想要永久改好，就需要打个补丁

npx patch-package pdfjs-dist

这样便可解决问题了。特此记录下。