pdf.js实现预览功能

遇到的需求，需要实现IE自带浏览器也可以预览。以下是自己踩过无数坑总结出来的。

1、引入pdf.js包，由于会出现跨域问题。在viewer.js里注释掉以下代码，注释viewer.js 的1565行即可，如下图所示：

2、由于后端是传输文件流格式给我，我采取window.open()进行预览操作。

首先为获取文件流格式的接口，里面包含参数（id）,后端为get,如下：

http://localhost:8080/super/attachment/preview.api?id=22447

其中http://localhost:8080为当前调用后台地址，不可写死，设置相对路径，于是采取以下截取方式，分为正式环境与本地环境（方便自测）。

handlePreview(row){var basePreviewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id//正式环境截取方式//本地测试预览截取方式： var basePreviewUrl =  process.env.baseUrl +'/super/attachment/preview.api?id='+ row.idconsole.log(basePreviewUrl)window.open('/static/pdf/web/viewer.html?file='+encodeURIComponent(basePreviewUrl))}

以上就可以实现预览了，但是这种方式不支持图片格式预览，于是进行判断，若后缀为图片格式，则采用element的自带组件进行预览。

  data() {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],imgs: [], pdfShow:false,}},

    handlePreview(index, row) {this.imgs = [] var isPreview = ''let imgList = ['jpg', 'JPG', 'gif', 'GIF', 'png', 'PNG']for (let i = 0; i < imgList.length; i++) {if (row.name.indexOf(imgList[i]) > -1) {isPreview = true;}}if (isPreview) {//若为图片格式，则采用另一种方式this.pdfShow = true// this.previewUrl = process.env.baseUrl +'supervise/attachment/open.api?id='+ row.idthis.previewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id,console.log(this.previewUrl)this.imgs.push({url: this.previewUrl,title: row.name,preview: "1"})} else {//其他格式，采用pdf.jslocalStorage.setItem("filename", row.name);//将文件名 放入本地存储，这个是预览时设置文档名字，后面会告诉大家var basePreviewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id// var basePreviewUrl =  process.env.baseUrl +'supervise/attachment/open.api?id='+ row.idconsole.log(basePreviewUrl)window.open('/static/pdf/web/viewer.html?file='+encodeURIComponent(basePreviewUrl))}},

3、若文档预览时，未显示正确名字，我们需要在pdf.js的文件包中有一个viewer.js的文件，在viewer.js中找到设置标题文件名的方法（setTitleUsingUrl）,直接将以下代码替换过去就好。后面发现部署后IE不兼容这种文档名字方法，IE预览就会出现一直不显示的情况。于是我换了另一种方式进行替换预览文件名

setTitleUsingUrl(url = ""){var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';this.url = url;var TITLE = localStorage.getItem("filename");try {var titleTmp = (TITLE == '' || TITLE == undefined) ? (decodeURIComponent(pdfjsLib.getFilenameFromUrl(url)) || url) : TITLE;this.setTitle(titleTmp);} catch (e) {this.setTitle(url);}
},

4、以下为IE兼容的预览文档名字方法，在viwer.js里加入getQueryParams方法,再找到getPDFFileNameFromURL（）进行修改

//获取地址栏参数
function getQueryParams(key){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！