pdfjs-dist插件的踩坑

新入职的一家公司,一开始去要求要改一个bug,是关于pdf文件上传的问题。

项目中用到了pdfjs-dist插件。

bug是这样的,文件获取不到。

一开始是在页面中引用

import pdfJs from "pdfjs-dist";
import pdfWorker from "pdfjs-dist/build/pdf.worker";

  然后在调用方法:

    GetPdfPages(fileObj) {
      // song
      var that = this;
      this.zhezhao = true;
      this.isLoadingEnable = true;
      // 将本地文件B64序列化后传入Pdf parser,并获得总页码
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        var pdfLoadingTask = pdfJs.getDocument(e.target.result);
        pdfLoadingTask.promise.then(function(pdf) {
          that.curCourseItem.pdfPages = pdf.numPages;
          that.isLoadingEnable = false;
          that.zhezhao = false;
        });
      };
      fileReader.onerror = (e) => {
        that.zhezhao = false;
        that.isLoadingEnable = false;
        that.$message.error("加载文件" + fileObj.name + "出错,请重试。");
      };
      fileReader.readAsDataURL(fileObj);
    },

  期间两次都出现了文件查不到的undefind提示。

网上查了一下解决方法:发现不太使用我的

解决方式:

pdfJs.GlobalWorkerOptions.workerSrc = pdfWorker;
在这个方法中写上这行代码。
如果还是不行的话,可能是你的pdfjs-dist版本号的问题。之前有的博客上说他只要是浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!),但是发现pdfjs-dist的老版本在浏览器上还是查找不到
pdfjs-dist/build/pdf.worker文件,最好的是使用^2.2.228版本,本人亲测。
posted @ 2020-09-25 17:30  web~Song  阅读(21345)  评论(0编辑  收藏  举报