uni-app在线预览pdf

这里保举下载pdf.js 插件
PDF.js - Browse Files at SourceForge.net
   特此留意 假如报 Promise.withResolvers is not a function 请去查察版本兼容标题  
  

• 低落pdf.js版本
  
• 进步node版本
  

下载完成后 在  static  文件夹下新建  pdf  文件夹，将解压文件放进  pdf  文件夹下

在当前须要预览的vue页面中，先将文件链接下载为当地文件，代码如下
小tips 这里假如是超链接的情势 可以直接跳转 不须要再去下载 （由于客户须要在线看 而不是先下载）

1. openPdf(url) {
2.     uni.downloadFile({
3.                 //需要预览的文件地址
4.                 url: url,
5.                 success: (res) => {
6.                         if (res.statusCode === 200) {
7.                                 //下载成功，得到文件临时地址
8.                                 console.log('下载成功', res.tempFilePath);
10.                                 //条件编译，若为h5端则直接赋值文件地址                       
11.                                 // #ifdef H5
12.                                 let newUrl = res.tempFilePath
13.                                 // #endif
15.                                 //条件编译，若为App端，则需要将本地文件系统URL转换为平台绝对路径       
16.                                 // #ifdef APP-PLUS
17.                                 let newUrl = plus.io.convertLocalFileSystemURL(res.tempFilePath)
18.                                 // #endif
20.                                 //这里新建一个vue页面，跳转并预览pdf文档
21.                                 uni.navigateTo({
22.                                         url: "/pages/previewArea/PdfPreview?url=" + url,
23.                                 })
24.                         }
25.                 }
26.         })
27. }

复制代码

这是新建的vue页面，用于web-view预览pdf文件，代码如下

1. <template>
2.   <view>
3.     <!-- 全局pdf查看器 -->
4.     <web-view :src="path"></web-view>
5.   </view>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       viewerUrl: "/static/pdf/-pdf--master/hybrid/pdf.html",
13.       path: "",
14.           fileUrl: "",
15.     }
16.   },
17.   onLoad(options) {
18.     this.fileUrl = options.url;
19.   },
21.         onShow() {
22.     //进行拼接即可
23.     this.path = `${this.viewerUrl}?url=${this.fileUrl}`
24.   }
25. }
26. </script>

复制代码

可以直接跳转表现

static/pdf/-pdf--master/hybrid/pdf.html 这个页面 可以自界说添加下载按钮

1. <body>
2.         <div>
3.                 <div id="pdf-view"></div>
4.                 <div class="down" id="downPdf">下载</div>
5.         </div>
7.     <script src="html/pdf/pdf.js"></script>
8.         <script src="html/pdf/pdf.worker.js"></script>
9.         <script src="html/pdf/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8">   
10.     </script>
11.         <script src="html/pdf/pdfh5.js" type="text/javascript" charset="utf-8"></script>
13.         <script type="text/javascript">
15.         xxxx
17.         xxx
19.         // 点击调用下载
20.                 let downPdf = document.getElementById("downPdf");
21.         document.getElementById("downPdf").addEventListener("click", async function (event) {
22.                         event.preventDefault();
23.                         try {
24.                                 var downloadLink = document.createElement('a');
25.                                 downloadLink.href = url; // 这里的url应该是你的PDF文件的URL
26.                                 downloadLink.download = url.split("/").pop()// 设置下载后的文件名
27.                                 downloadLink.style.display = 'none';
28.                                 document.body.appendChild(downloadLink);
29.                                 downloadLink.click();
30.                                 document.body.removeChild(downloadLink);
31.                         } catch (error) {
32.                                 console.log('error',error);
33.                         }
34.         </script>
35. </body>

复制代码

   校验是否是pdf文件
  let regPdf = /\.(pdf)$/.test(data.toLowerCase())  是否pdf文件
  let regImg = /\.(jpg|jpeg|png|gif)$/.test(data.toLowerCase())  是否图片文件
  let regDoc = /\.(doc|docx)$/.test(data.toLowerCase())  是否doc 大概 docx文件