ElementUI项目使用pdf.js预览pdf文件

    最近因为要用Elementui展示pdf文件。查了很多资料，发现vue-pdf还比较初级，不如pdf.js成熟。所以使用的pdf.js。

    1、下载pdf.js

    点击这里可以【下载】。

    2、解压

    打开elementui项目的config/index.js文件。查看资源目录是static文件夹。

    所以将解压后的文件夹放入项目的static目录下，如图：

    3、使用

    在新建的vue文件中，直接如下使用即可。

<template>
  <div class="showPdf">
    <iframe :src="pSrc" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      pSrc: ''
    }
  },
  methods: {
    loadPDF () {
      //pdf文件地址  测试可用
      let baseurl = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      //根据实际情况 通过相对路径找到viewer.html
      this.pSrc = '../../static/pdf/web/viewer.html?file=' + encodeURIComponent(baseurl)
    }
  },
  mounted () {
    this.loadPDF()
  }
}
</script>

<style>
.showPdf{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
}
</style>

之后就可以打开对应页面了。

注意：这时候打开页面会报错：file origin does not match viewer's。这是跨域问题，解决办法如下，打开viewer.js文件，注释掉这三行代码即可。

//if (fileOrigin !== viewerOrigin) {
//  throw new Error('file origin does not match viewer\'s');
//}

至此就可以预览pdf文件了。