vue中使用pdf.js

weixin_45849565

已于 2023-10-13 15:54:20 修改

阅读量2.2k

点赞数 4

文章标签： pdf

于 2023-10-13 15:52:56 首次发布

一、下载pdf.js
官网：http://mozilla.github.io/pdf.js/getting_started/#download

二、拖入项目中
将安装包放入到项目中public文件夹下

三、页面中使用
1.直接使用

window.open('/pdf/web/viewer.html?file=' + path);//path是文件的全路径地址

2.通过iframe新页面使用

<template>
  <div class="main-page">
   <div class="pdf-container">
      <iframe
        :src="`pdf/web/viewer.html?file=${pdfurl}`"
        class="pdf-window"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  name: "reportview",
  data() {
    return {
      pdfurl: ""
    };
  }
};
</script>
<style lang="scss" scoped>
.pdf-container{
  width: 100%;
  height: calc(100% - 90px);
}
</style>

四、问题总结

1.解决跨域问题

报错 "file origin does not match viewer's"

解决：直接注释掉web/viewer.js中的这几行，不去判断跨域即可

// var fileorigin = new url(file, window.location.href).origin;
// if (fileorigin !== viewerorigin) {
//   throw new error("file origin does not match viewer's");
// }

2.pdfjs中身份认证

通过这种方式访问：'/pdf/web/viewer.html?file=' + path，如何在请求后端pdf文档时，在请求头中加入token验证呢？

解决：找到build下的pdf.js文件，加上请求头token的设置代码即可

var params = object.create(null);
var rangetransport = null,
      worker = null;
 
// 添加设置token代码
params['httpheaders'] = {
    "authentication": window.localstorage.getitem('token')
}

3.去掉pdf预览顶部的下载等按钮

解决：找到web下viewer.html文件，找到相对应的控件设置行内样式 visibility: hidden 即可

4.分段加载

对于一些比较大的pdf文件，我们需要做到分段加载，否则会使界面卡死

（1）找到web下viewer.js文件，将disableautofetch、disablestream均改为true
（2）找到build/pdf.js文件，寻找default_range_chunk_size配置项，并修改为65536*16

5.pdf文件载入后，会自动打开左侧缩略图一栏，怎么关闭自动打开呢？

  setInitialView (view = _ui_utils.SidebarView.NONE) {
    if (this.isInitialViewSet) {
      return
    }
    this.isInitialViewSet = true
    if (view === _ui_utils.SidebarView.NONE || view === _ui_utils.SidebarView.UNKNOWN) {
      this.#dispatchEvent()
      return
    }
    // 关闭自动打开左侧缩略图一栏
    // this.switchView(view, true)
    if (!this.isInitialEventDispatched) {
      this.#dispatchEvent()
    }
  }

注释掉setInitialView方法里面的this.switchView(view, true)这一行，就可以啦

五、原文链接
001-pdfjs实现PDF预览 - 北冥有鱼