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引入

<template>
  <div class="Contract">
      <iframe :src="pathUr" ></iframe>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pathUr: ''// pdf文件地址
    }
  },
  created () {
    document.title = ''
      let filePath = this.$route.query.FilePath || ''    //  我的pdf地址是从上个页面传过来的，只是一个地址
      this.pathUr = '../../../../static/pdf/web/viewer.html?file=' + filePath   //  根据自己的文件地址将viewe.html引进来
      console.log(filePath, '更改前路径')
      console.log(this.pathUr, '更改后的路径')
  }
}
</script>

<style lang="scss" scoped>
.Contract{
  iframe{
    width: 100vw;
    height: 100vh;
    border: none;
  }
}
</style>

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插件很多文件用不到的可以删掉。