pdfjs的使用

最新推荐文章于 2024-06-15 13:50:25 发布

漫天绯羽

最新推荐文章于 2024-06-15 13:50:25 发布

阅读量1.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36762151/article/details/125360224

版权

需求：在浏览器中直接打开PDF文件预览，或是，打开本地PDF预览。

问题：本来后端返回一个服务器地址就可以直接window.open()打开PDF。但是返回的是二进制流。

还有，处于安全性考虑，在项目中是无法打开本地（如：D/）中的文件的。

首要任务：

下载PDFjs；但是，最新的插件使用的是es6语法有浏览器兼容性问题，不兼容QQ浏览器、跟别说IE 了。所以请认准es5版的 pdf.js-2.5.207；

插件下载地址：链接：https://pan.baidu.com/s/1uUGFuPJ_RXZx3lnQKr-M_g
提取码：ph0n

1.将插件放入项目

h5项目：（随便找个地儿放就好）

vue项目：

2.使用

通过：插件中 web/viewer.html 打开PDF，所以一定要找对文件夹。

本地文件预览：（既然打不开磁盘中的文件，那么就转为流的方式打开）

<body>
<input type="file" id="myfile">
<script>
  // 本地文件预览
  window.onload=function (){
    const myfile = document.getElementById("myfile");
    myfile.addEventListener("change",function(){
      const file = this.files[0];   //文件流数据
      const url = URL.createObjectURL(file);   //将文件转为路径
      // ./pdf/web/viewer.html 一定找对文件夹
      window.open("./pdf/web/viewer.html?file="+url+"&.pdf");
    })
  }
</script>
</body>

服务器返回数据流方式预览：

  const blob = new Blob([data], {   //data 服务器返回的二进制数据流
        type: "application/pdf"
      });
      const url = URL.createObjectURL(blob);   //将文件转为路径
      // ./pdf/web/viewer.html 一定找对文件夹
      window.open("./pdf/web/viewer.html?file="+url+"&.pdf");