pdf文件的预览解决方案

pdf文件预览的解决方案

1. iframe标签：浏览器自带的能够解析pdf文件的能力，作用是文档中的文档，或者浮动的框架(FRAME) 。

   使用方式：

   // [pdfUrl] 获取pdf地址 eg：http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf
   <iframe ref="mainiframe" :src="pdfUrl" style="height:100%;width:100%" ></iframe>
   

   对于iframe标签的属性介绍可以参考 https://www.w3school.com.cn/tags/tag_iframe.asp

2. 使用pdf.js预览pdf文件

   使用方式：

   1. 下载pdf.js --> 引入pdf.js文件( https://mozilla.github.io/pdf.js/getting_started/#download )

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPGuRhNh-1685281109222)(C:\Users\Admin\Desktop\csdn\截图1.png)]

   2. 项目中引入 --> 将build文件夹中的pdf.js和pdf.worker.js放在根目录public中的build文件夹中，同时将web文件夹放在public/build的同级目录中。

   3. 使用： 主要是地址"/web/viewer.html?file="+href，href为请求后端返回的文件路径或者后端返回文件流前段解析后生成的文件路径，前面拼接上/web/viewer.html?file=，地址为自己引入pdf.js文件的路径，也可以直接这样写/web/viewer.html，他会直接去找 。

      window.open("/web/viewer.html?file="+href);
      

      如果你想要的禁掉pdf文件的下载、打印等功能，最简单的方法是，找的自己导入文件里的viewer.html，路径为public/web/viewer.html。

3. 使用vue-pdf组件进行预览

   1. 下载vue-pdf安装包

      npm install  vue-pdf --save 
      

   2. 项目中引入

      import pdf from 'vue-pdf'
      
      export default {
          components:{
              pdf
          },
      }
      

      单页面使用如下：

      <pdf 
      	src='pdf存放的位置'
      ></pdf>
      

      多页面使用如下：

      <template>
          <div style="margin-top: 10px;" >
               <pdf 
                 v-for="i in numPages"
                  :key="i"
                  :src="src"
                  :page="i"
                  style="display: inline-block; width: 100%"
              ></pdf>
          </div>
      </template>
      
      <script>
      import pdf from 'vue-pdf'
      let loadingTask = pdf.createLoadingTask('/static/pdf/正文-建立健全分层分级精准防控末端发力终端见效工作机制实施细则');//这样能更快的加载
       
      export default {
          components:{
              pdf
          },
          data() {
              return {
                  src: '/static/pdf/正文-建立健全分层分级精准防控末端发力终端见效工作机制实施细则.pdf',
                  numPages: 0,
              }
          },
          mounted() {
              loadingTask.promise.then(pdf => {
              	this.numPages = pdf.numPages;
              });
          },
      
      }
      </script>
      

   3. 注意：

      • vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地
      • 用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；