PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf

我会带着你远行 2023-07-17 04:42 19阅读 0赞

如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用

PDF http://mozilla.github.com/pdf.js/
    XLS https://github.com/SheetJS/sheetjs
    DOCX https://github.com/mwilliamson/mammoth.js (docx可以解析,doc 不行) 
    PPT https://github.com/SheetJS/js-ppt

[vue项目中使用pdf.js预览pdf文件\_shentibeitaokong的博客-CSDN博客][vue_pdf.js_pdf_shentibeitaokong_-CSDN]

[浏览器以只读方式打开PDF\_程裕强的专栏-CSDN博客][PDF_-CSDN]

[http://www.rioyi.com/][http_www.rioyi.com]

项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实 这和前端框架无关的，直接使用pdf.js原生

搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生

的是最好的啦！

首先肯定是导入插件，我是从官网直接下载，链接：[点击打开链接][Link 1]，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。目录结构放一下

其实就可以直接用的，网上很多，viewer.js 里的

用file= 的方式也可以打开哟，放在页面上使用，我是a进行嵌套 或者 ifram

file参数中默认只允许传简单路径比如：http://www.a.com/file.php.  如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错， 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

这告诉我们 url必须进行encode编码  把参数file后传入的动态参数中特殊字符转义：

这里又会有两种方法：

encodeURI() 把字符串编码为 URI  
encodeURIComponent() 把字符串编码为 URI 组件

发现        encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

![70][]

后台返回文件流，前端实现预览pdf  [后台返回文件流，前端实现预览pdf - 简书][pdf -]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

document.getElementById('sourceFile').value = ''  " //可以重复上传文件

//上传
    <div class="upload">
            <input
              type="file"
              placeholder="选择文件"
              ref="avatarInput"
              @change="changeImage($event)"
              accept="application/msword, application/pdf" 
              multiple="multiplt"
            />
            <span>{
       {clickUpload}}</span>
          </div>
    changeImage(e) {
          // 上传图片事件
          var files = this.$refs.avatarInput.files;
        //var files = e.target.files[0];
          var that = this;
          function readAndPreview(file) {
            //Make sure `file.name` matches our extensions criteria
            if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
              var reader = new FileReader();
              reader.onload = function (e) {
                // 防止重复上传
                if (that.imgDatas.indexOf(e.target.result) === -1) {
                  that.imgDatas.push(e.target.result);
                }
              };
              reader.readAsDataURL(file);
            }
          }
          readAndPreview(files[0]);
          if (files.length === 0) {
            return;
          }
          // 文件上传服务器
          this.File = files[0];
          this.clickUpload = files[0].name;
          document.getElementById('sourceFile').value = '';
        },
    let formData = new FormData();
            formData.append("File", this.File, this.File.name);
    
    //获取
    <iframe :src="this.pdfUrl" frameborder="0" width="100%" height="800px"></iframe>
    // accept="application/msword, application/pdf"  限制上传文件类型
    // accept="image/*" — 接受任何图片文件类型. 
    data{ rerurn { pdfUrl:'' }}
    //获取接口
    axios({
                method: "get",
                url: "api/AuditContract/GetPDFContent",
                headers: {
                  "Content-Type": "application/pdf",
                },
                params: {
                  RandomCode: res.result,
                },
                responseType: "blob",
              })
                .then((response) => {
                  console.log(response.data);//文件流
                  this.pdfUrl = this.getObjectURL(response.data);
                 //this.pdfUrl = window.URL.createObjectURL(response.data); 写这种就不需要下面的方法了(可以尝试一下)
                })
                .catch((error) => {
                  console.log(error.data);
                });
    
    getObjectURL(file) {
          // console.log(file,'file')
          let url = null;
          if (window.createObjectURL !== undefined) {
            // basic
            // url = window.createObjectURL(file)
            var binaryData = [];
            binaryData.push(file);
            url = window.URL.createObjectURL(
              new Blob(binaryData, { type: "application/pdf" })
            );
          } else if (window.webkitURL !== undefined) {
            // webkit or chrome
            try {
              // url = window.webkitURL.createObjectURL(file);
              var binaryData = [];
              binaryData.push(file);
              url = window.URL.createObjectURL(
                new Blob(binaryData, { type: "application/pdf" })
              );
            } catch (error) {
              console.log(error);
            }
          } else if (window.URL !== undefined) {
            // mozilla(firefox)
            try {
              // url = window.URL.createObjectURL(file);
              var binaryData = [];
              binaryData.push(file);
              url = window.URL.createObjectURL(
                new Blob(binaryData, { type: "application/pdf" })
              );
            } catch (error) {
              console.log(error);
            }
          }
          return url;
        },

这样如此就ok了

viewer.html 修改

整个顶部bar 隐藏
    <div id="toolbarViewer" style="display:none"></div>
    
    隐藏并且取消打印和下载按钮和事件 (pointer-events: none 使事件点击不生效)
    
    <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" style="display: none;pointer-events: none" data-l10n-id="print">
    <span data-l10n-id="print_label">Print</span> </button>
    
    <button id="download" class="toolbarButton download hiddenMediumView" title="Download"
    style="display: none;pointer-events: none" tabindex="34" data-l10n-id="download">
     <span data-l10n-id="download_label">Download</span> </button>

### pdf.js禁掉下载和打印的功能 ###

[vue_pdf.js_pdf_shentibeitaokong_-CSDN]: https://blog.csdn.net/shentibeitaokong/article/details/80011900
[PDF_-CSDN]: https://blog.csdn.net/chengyuqiang/article/details/88828480
[http_www.rioyi.com]: http://www.rioyi.com/
[Link 1]: http://mozilla.github.io/pdf.js/getting_started/#download
[70]: /images/20230528/b14eeace50c94f548757ce8bd2f6a07e.png
[pdf -]: https://www.jianshu.com/p/242525315bf6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20230528/3a333a671fc546bebe2e7e2cee451158.png