vue项目中，下载pdfjs压缩包,将pfdjs作为静态资源的方式使用pdfjs

demo,请参考： demo地址

版本：

 "vue": "^2.6.11",
  "pdfjs-dist": "^2.6.347"

一、详细步骤

1. 下载pdfjs的压缩包，并根据需求更改源代码，删除不必要的部分

1. 到github上下载pdfjs的压缩包，减压后将其放于项目的根目录下的static下（或者放在public的pdfjs文件夹下）
2. 下载地址：https://github.com/mozilla/pdf.js/releases/tag/v2.5.207

2. 在组件中测试：

利用viewer.html实现pdf文件的在线展示 ,注意：只能是绝对路径或者文件流

  window.open(`pdfjs/web/viewer.html?file=${
      
      this.pdfFileUrl}`); // pdfFileUrl为远程地址
  window.open(`pdfjs/web/viewer.html?file=test.pdf`); // 本地文件test.pdf 和viewer.html文件处于同级目录；
 测试的pdf地址：
 https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf
 https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf

3. 遇到报错信息：file origin does not match viewer’s

遇到file origin does not match viewer’s 的报错信息，要到viewer.js文件中注释调下面几行用于判断远程地址的代码（因为pdf.js不支持跨域请求）

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

4. 遇到报错信息：Uncaught SyntaxError: Unexpected token '<'

vue-cli3及以上 项目中，下载的资源一定要放在public文件夹下；否则会报错 ：Uncaught SyntaxError: Unexpected token '<'

public下的pdfjs文件夹下：在使用的时候，是 pdfjs/... / 并未涉及public;

 window.open(`pdfjs/web/viewer.html?file=${
      
      this.pdfFileUrl}`); // pdfFileUrl为远程地址

二、在组件中测试并使用

Test.vue文件

1. 新开一页展示pdf，window.open(url) 方式

<template>
  <div class="test">
    <el-button type="danger" @click="previewPDF">点击预览pdf</el-button>
  </div>
</template>
<script>
export default {
    
    
  methods: {
    
    
    previewPDF() {
    
    
      let pdfFileUrl =
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
      window.open(`pdfjs/web/viewer.html?file=${
      
      pdfFileUrl}`); // 新开一页，展示pdf文档
    }
  }
};
</script>

2. 在当前页展示pdf， iframe方式

<template>
  <div class="test">
    <el-button v-if="!pdfFileUrl" type="danger" @click="previewPDF"
      >点击预览pdf</el-button
    >
    <iframe
      v-if="pdfFileUrl"
      :src="'pdfjs/web/viewer.html?file=' + pdfFileUrl"
      class="pdf-viewer"
    />
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      pdfFileUrl: ""
    };
  },
  methods: {
    
    
    previewPDF() {
    
    
      this.pdfFileUrl ="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
    }
  }
};
</script>
<style lang="scss">
.pdf-viewer {
    
    
  height: 100vh;
  width: 100vw;
}
.test {
    
    
  overflow-x: hidden;
}
</style>

详细demo,请参考： demo地址

vue项目中，npm install方式使用pdfjs，请参考 博客

此篇文章参考了：博客，详细信息可前往该博客查看。