【微信小程序预览文件】（PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX）

概述

小程序端实现文件预览功能，主要针对PDF文件的预览。通过使用uni-app框架的uni.openDocument和uni.downloadFile API，可以实现跨平台的文件预览功能。

功能特性

支持PDF文件预览
自动下载和缓存文件
错误处理和用户提示
加载状态显示

API 说明

uni.openDocument

用于打开文档文件，支持多种文件格式。

参数说明

参数名	类型	必填	说明	平台差异说明
filePath	String	是	文件路径（本地路径），可通过 downloadFile 获得	-
fileType	String	支付宝小程序必填，其他平台非必填	文件类型，指定文件类型打开文件	HarmonyOS、小程序
showMenu	Boolean	否	右上角是否有可以转发分享的功能	微信小程序、支付宝小程序、快手小程序
success	Function	否	接口调用成功的回调函数	-
fail	Function	否	接口调用失败的回调函数	-
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）	-

uni.downloadFile

用于下载文件到本地临时目录。

参数说明

参数名	类型	必填	说明
url	String	是	下载资源的 url
success	Function	否	下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}
fail	Function	否	下载失败的回调函数
complete	Function	否	下载结束的回调函数（调用成功、失败都会执行）

代码实现

PDF预览功能

javascript 复制代码

// PDF预览
const previewPDF = async (contract) => {
  if (!contract || !contract.path) {
    uni.showToast({
      title: "PDF文件路径不存在",
      icon: "none",
    });
    return;
  }

  try {
    uni.showLoading({
      title: "正在加载PDF...",
    });

    // 下载PDF文件
    const downloadRes = await uni.downloadFile({
      url: contract.path,
      // url:'https://xxxx.com/aaaa.pptx'
    });
    
    console.log("downloadRes", downloadRes);
    
    if (downloadRes.statusCode === 200) {
      // 打开PDF文件
      const openRes = await uni.openDocument({
        filePath: downloadRes.tempFilePath,
        showMenu: true,
        fileType: "pdf",
        success: () => {
          console.log("PDF打开成功");
        },
        fail: (err) => {
          console.error("PDF打开失败:", err);
          uni.showToast({
            title: "PDF打开失败",
            icon: "none",
          });
        },
      });
    } else {
      uni.showToast({
        title: "PDF下载失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("PDF预览失败:", error);
    uni.showToast({
      title: "PDF预览失败",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

使用示例

基本用法

javascript 复制代码

// 在页面中调用
const handlePreviewPDF = () => {
  const contract = {
    path: "https://example.com/document.pdf"
  };
  previewPDF(contract);
};

在模板中使用

html 复制代码

<template>
  <view class="container">
    <button @click="handlePreviewPDF">预览PDF</button>
  </view>
</template>

<script>
export default {
  methods: {
    handlePreviewPDF() {
      const contract = {
        path: "https://example.com/document.pdf"
      };
      previewPDF(contract);
    }
  }
}
</script>

支持的文件类型

根据平台不同，支持的文件类型有所差异：

PDF
DOC
DOCX
XLS
XLSX
PPT
PPTX

错误处理

常见错误及解决方案

文件路径不存在
- 检查传入的contract对象和path属性
- 确保URL格式正确
下载失败
- 检查网络连接
- 验证文件URL是否可访问
- 检查文件大小限制
打开失败
- 确认文件格式是否支持
- 检查文件是否损坏
- 验证平台兼容性

错误处理最佳实践

javascript 复制代码

const handleError = (error, context) => {
  console.error(`${context}失败:`, error);
  
  let errorMessage = "操作失败";
  if (error.errMsg) {
    if (error.errMsg.includes("download")) {
      errorMessage = "文件下载失败";
    } else if (error.errMsg.includes("open")) {
      errorMessage = "文件打开失败";
    }
  }
  
  uni.showToast({
    title: errorMessage,
    icon: "none",
    duration: 2000
  });
};

性能优化建议

文件大小限制
- 建议单个文件不超过50MB
- 大文件可考虑分页或压缩
缓存策略
- 利用uni.downloadFile的缓存机制
- 避免重复下载相同文件
用户体验
- 显示加载状态
- 提供取消下载功能
- 优化错误提示信息

调试技巧

使用控制台日志

javascript 复制代码

console.log("下载结果:", downloadRes);
console.log("打开结果:", openRes);

检查网络请求
- 在开发者工具中查看Network面板
- 确认文件URL是否可访问
测试不同文件
- 使用不同格式和大小的文件进行测试
- 验证各种错误场景

总结

通过使用uni-app的文件预览API，可以轻松实现跨平台的文件预览功能。关键要点：

先下载文件到本地临时目录
使用openDocument打开文件