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

概述

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

功能特性

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

API 说明

uni.openDocument

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

参数说明

uni.downloadFile

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

参数说明

代码实现

PDF预览功能

// 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();
  }
};

使用示例

基本用法

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

在模板中使用

<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

错误处理

常见错误及解决方案

1. 文件路径不存在

   • 检查传入的contract对象和path属性
   • 确保URL格式正确

2. 下载失败

   • 检查网络连接
   • 验证文件URL是否可访问
   • 检查文件大小限制

3. 打开失败

   • 确认文件格式是否支持
   • 检查文件是否损坏
   • 验证平台兼容性

错误处理最佳实践

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
  });
};

性能优化建议

1. 文件大小限制

   • 建议单个文件不超过50MB
   • 大文件可考虑分页或压缩

2. 缓存策略

   • 利用uni.downloadFile的缓存机制
   • 避免重复下载相同文件

3. 用户体验

   • 显示加载状态
   • 提供取消下载功能
   • 优化错误提示信息

调试技巧

1. 使用控制台日志

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

2. 检查网络请求

   • 在开发者工具中查看Network面板
   • 确认文件URL是否可访问

3. 测试不同文件

   • 使用不同格式和大小的文件进行测试
   • 验证各种错误场景

总结

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

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