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

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

时间：2023-02-09 14:51:16

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

PDF /pdf.js/XLS /SheetJS/sheetjsDOCX /mwilliamson/mammoth.js (docx可以解析,doc 不行) PPT /SheetJS/js-ppt

vue项目中使用pdf.js预览pdf文件_shentibeitaokong的博客-CSDN博客

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

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

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

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

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

的是最好的啦！

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

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

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

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

<a href="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" target="_blank">看pdf</a><a :href="'/static/pdf/web/viewer.html?file='+ pdfUrl"></a><iframe src="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" frameborder="0" width="100%" height="800px"></iframe><iframe :src="'/static/pdf/web/viewer.html?file='+ pdfUrl " frameborder="0" width="100%" height="800px"></iframe>

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

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

这里又会有两种方法：

encodeURI()把字符串编码为 URI

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

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

encodeURIComponent则会。

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

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

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

//上传<div class="upload"><inputtype="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 criteriaif (/\.(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 chrometry {// 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>