vue项目利用pdf.js预览pdf文件步骤及跨域问题

最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如vue-pdf（跨域以及分页会有很多问题）

最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果），强烈推荐该插件，以下介绍用法

1.首先去官网下载pdf插件，我这里用的是稳定版本

官网地址：http://mozilla.github.io/pdf.js/getting_started/#download

2.将整个文件改名为pdf并放到vue的static文件里

pdf文件里web里面的viewer.js（这个页面需要注意是解决跨域问题）、viewer.html（这个文件主要是设置的入口页面，到时页面引入的时候需要加上这个页面的路径），和build的几个js文件

3.vue页面利用iframe引入

4.跨域问题

使用pdf.js时，当有跨域的问题时，会加载失败，错误信息为file origin does not match viewer’s。

直接注释掉web/viewer.js中的这三行就行，不去判断跨域即可。

// if (origin !== viewerOrigin && protocol !== 'blob:') {
//     throw new Error('file origin does not match viewer\'s')
// }

ok，这样就可以正常预览pdf文件了，当然这个pdf.js插件很多文件用不到的可以删掉。