vue pdfjs 在线预览

1. 下载pdfjs

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



2. 放入项目中

   将下载下来的文件解压缩后，重命名为pdf，将里面的pdf文件夹拷贝到项目中的public文件夹中



3. 页面中使用

<template>
  <div class="container">
    <iframe :src="pSrc" class="child-container"></iframe>
  </div>
</template>

<script>
export default {
  name: "pdf",
  data() {
    return {
      // pdf文件预览完整路径
      pSrc: '',
    };
  },

  methods: {
    //在线预览pdf文件方法
    onlinePreviewPDF() {

      //1. 组装在线预览完整路径，一般由后端获取
      //baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用
      let baseurl = 'http://localhost:8080/22.pdf';

      //2. 解决ie有缓存  及决方案：加个随机数解决 + '?r=' + new Date()
      let pSrc = baseurl + '?r=' + new Date();
      //3.文件路径编码+调用pdfjs实现在线预览pdf文件
      this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);
    },
  },
  //生命周期函数
  mounted: function () {
    this.onlinePreviewPDF();
  }
};
</script>

<style>

.child-container {
  width: 100%;
  height: 500px;
}
</style>      

预览效果

本地静态文件