Uniapp微信小程序Vue3 实现预览文件(pdf、doc、ppt、图片等)

在线预览pdf

webView嵌套

最简单的方法，但加载较慢

直接内嵌 pdf 网址， 直接在小程序中打开pdf网页，打开该页面时自动铺满整页

​

注：个人开发者无法使用webview标签！！

​

0. 父页面按钮点击跳转新页面

 const openPDF2 = () => {
   uni.navigateTo({
     url: "./webview?webUrl=" + webUrl,
   });
 }

2. 子页面接收铺满页面

 <template>
   <view id="web-info">
     <web-view :src="src"></web-view>
   </view>
 </template>

pdf.js插件

插件地址 PDF.js - Getting Started (mozilla.github.io)

优点：可个性化、更优雅

缺点：体积过大，微信小程序使用还要分包

原生方法

wx.openDocument真机调试可以打开文件，线上或者不开调试无法打开 | 微信开放社区 (qq.com)

微信小程序预览 word、excel、ppt、pdf 等文件 - suwanbin - 博客园 (cnblogs.com)

使用微信小程序原生方法

将文件下载到本地临时存储，然后使用openDocument在新页面打开

官网API

1. uni.downloadFile方法下载文件临时存储

   uni.downloadFile | uni-app官网 API

2. uni.openDocument在新页面预览

   支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx

   uni.opendocument | uni-app官网API

​

注：改方法须在微信公众平台配置 downloadFile合法域名 否则上传后将无法从当前网址下载文件

​

代码如下：

附一个pdf测试链接： 201911130855255668.pdf (cdp.edu.cn)

图片测试：i-blog.csdnimg.cn/direct/cb66…

 const previewFile = (url: string) => {
   // 获取文件后缀名
   const fileExtension = url.split(".").pop()?.toLowerCase();
   if (!fileExtension) {
     uni.showToast({ title: "无法识别文件类型", icon: "none" });
     return;
   }
 ​
   // 判断文件类型
   if (["jpg", "jpeg", "png", "gif"].includes(fileExtension)) {
     // 图片预览
     uni.previewImage({
       urls: [url],
     });
   } else {
     // 文档预览
     uni.downloadFile({
       url: url,
       filePath: filePath,
       success: (res) => {
 ​
         if (res.statusCode === 200) {
           uni.openDocument({
             filePath: res.tempFilePath,
             success: () => console.log("文档预览成功 路径: ", res.tempFilePath),
               
             fail: (err) => {
               console.error("文档预览失败", err);
               uni.showToast({
                 title: "预览失败",
                 icon: "error",
               });
             },
           });
         } else {
           uni.showToast({
             title: "文件下载失败",
             icon: "error",
           });
         }
       },
       fail: (err) => {
         console.error("文件下载失败", err);
         uni.showToast({
           title: "文件下载失败",
           icon: "error",
         });
       },
     });
   }
 };