vue使用pdf.js预览文件及相关使用问题

相比于vue-pdf预览文件这个方法简单许多，而且使用功能齐全。运用时只需三步即可：

1、下载文件

http://mozilla.github.io/pdf.js/getting_started/#download下载稳定版本；

2、使用文件

解压文件后将文件内容放入public文件夹中，目录格式如下

3、预览文件

在使用的地方放入如下代码，将预览文件地址直接放入encodeURIComponent编码中即可。

<iframe
  ref="pdfFile"
  :src="'pdf/web/viewer.html?file=' + encodeURIComponent(pathUrl)"
  width="100%"
  height="100%"
  border="0"
></iframe>

注意：使用编码文件地址是因为预览的文件路径会有特殊符号，预览时文件自己处理了解码过程。

 如上三步即可完成文件的预览。

问题一：自己封装加载效果；

思路：使用网络请求加载地址，然后在网络请求中加加载效果。

<iframe
  ref="pdfFile"
  :src="pathUrl"
  width="100%"
  height="100%"
  border="0"
></iframe>

async getFileUrl(url) {
      //获取url
      if (url) {
        //增加加载效果及加载文件报错提示
        this.loading = true;
        await axios({
          method: "get",
          url: url,
          responseType: "blob", //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
          timeout: 10000,//默认延迟10s
        })
          .then((response) => {
            let blob = new Blob([response.data], { type: response.data.type });
            let newUrl = URL.createObjectURL(blob);
            this.pathUrl =
              window.location.origin +
              window.location.pathname +
              "pdf/web/viewer.html?file=" +
              newUrl;
            this.loading = false;
          })
          .catch((err) => {
              this.loading = false;
              //handleMessage("文件错误", "error");
              this.errorReport = true;
              this.errText = "报告文件错误,打开失败";
          });
      }
    },

问题二：切换文件后关闭上一个文件预览请求；

思路：使用网络请求文件时增加cancelToken属性；

async getFileUrl(url) {
      //获取url
      if (url) {
        //增加加载效果及加载文件报错提示
        this.loading = true;
        const _this = this;
        const CancelToken = axios.CancelToken;
        this.cancelTokenFn && this.cancelTokenFn();
        this.cancelTokenFn = null;
        //上个请求加载时间过长，切换下一个pdf时，关闭上一个请求
        await axios({
          method: "get",
          url: url,
          responseType: "blob", //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
          timeout: 10000,//默认延迟10s
          cancelToken: new CancelToken(function executor(c) {
            _this.cancelTokenFn = c;
          }),
        })
          .then((response) => {
            let blob = new Blob([response.data], { type: response.data.type });
            let newUrl = URL.createObjectURL(blob);
            this.pathUrl =
              window.location.origin +
              window.location.pathname +
              "pdf/web/viewer.html?file=" +
              newUrl;
            this.loading = false;
          })
          .catch((err) => {
            if (err == "Cancel") {
              this.loading = false;
            } else {
              this.loading = false;
              //handleMessage("文件错误", "error");
              this.errorReport = true;
              this.errText = "报告文件错误,打开失败";
            }
          });
      }

问题三：切换文件预览后从顶部开始浏览；
注释或删除view.js两行代码

//localStorage.setItem("pdfjs.history", databaseStr);

//return _context2.abrupt("return", localStorage.getItem("pdfjs.history"));