一、问题描述

1. 获取在服务器的文件地址，预览pdf，并生成左侧目录

二、效果

三、代码演示

1. 从官网下载 pdf.js 库

下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

2. 本版本使用 4.4.186 版本进行操作

3. 将下载后的文件放在 pubic -> static->pdf 下
   

4. 新建 vue 文件，代码如下, pdfSrc 地址为线上可以访问的文件地址, #page= 为加载后自动显示第几页，本文件使用的 iframe 显示 pdf 的预览，且根据分辨率大小自适应高度

 <div class="iframe-container">
   <iframe ref="iframe"  :src="'static/pdf/web/viewer.html?file=' + pdfSrc + '#page=1'" frameborder="0"></iframe>
 </div>
</template>

<script>
export default {
 data() {
   return {
     pdfSrc: 'http://192.168.10.42/admin/testpdf.pdf'
   };
 },
 mounted() {
   this.setIframeHeight();
   window.addEventListener('resize', this.setIframeHeight);
 },
 methods: {
   setIframeHeight() {
     const iframe = this.$refs.iframe;
     iframe.style.height = window.innerHeight + 'px';
   }
 },
 beforeDestroy() {
   window.removeEventListener('resize', this.setIframeHeight);
 }
};
</script>

<style scoped>
.iframe-container {
 width: 100%;
 height: 100vh; /* Viewport height */
 overflow: hidden;
}

iframe {
 width: 100%;
 height: 100%;
 border: none;
}
</style>

5.主要对下载后的文件 viewer.html 和 viewer.mjs 进行修改，修改部分详见以下地址，将代码拉取下来，直接替换即可

gittee 地址： git clone git@gitee.com:zcr-1/pdfjs-dist.git