小程序打开文件(文件流、地址链接)封装

一、核心 API:wx.openDocument

这是小程序中用于打开非图片/视频文件的官方API,主要用于预览办公文档格式。 支持的文件类型:

文件类型 fileType 值 支持情况
PDF 文件 pdf ✅ 广泛支持
Word 文档 doc, docx ✅ 大部分支持
Excel 表格 xls, xlsx ✅ 大部分支持
PPT 演示稿 ppt, pptx ✅ 大部分支持
文本文件 txt ✅ 支持
其他格式 不指定或 null ⚠️ 依赖系统

基本用法

js 复制代码
wx.openDocument({
  filePath: '', // 文件临时路径或本地路径
  fileType: 'pdf', // 文件类型,可选
  success: (res) => {
    console.log('打开文档成功');
  },
  fail: (err) => {
    console.error('打开文档失败:', err);
  }
})
js 复制代码
// 打开后端返回的二进制流文件
export function openFileStream(fileName = 'HN', fileType = 'pdf', params = {}, apiUrl = '') {
    return new Promise((resolve, reject) => {
        wx.showLoading({
            title: '加载文件中...',
            mask: true
        });
        wx.request({
            url: apiUrl,
            method: 'POST',
            data: params,
            responseType: 'arraybuffer',  //**注意设置
            header: {
                'Content-Type': 'application/json',
                'token': wx.getStorageSync('token'),
            },
            success: async (res) => {
                wx.hideLoading();
                if (res.statusCode === 200 && res.data) {
                    try {
                        const fs = wx.getFileSystemManager();
                        const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_${fileName}.${fileType}`;

                        // 写入文件
                        fs.writeFile({
                            filePath: tempFilePath,
                            data: res.data,
                            encoding: 'binary',
                            success: () => {
                                // 打开文档
                                wx.openDocument({
                                    filePath: tempFilePath,
                                    success: resolve,
                                    fail: (err) => {
                                        reject(
                                            wx.showToast({
                                                title: '文件打开失败...',
                                                icon: 'none',
                                                duration: 3000,
                                            })
                                        );
                                    }
                                });
                            },
                            fail: (err) => {
                                reject(new Error('文件保存失败: ' + err.errMsg));
                            }
                        });
                    } catch (error) {
                        reject(error);
                    }
                } else {
                    reject(
                        wx.showToast({
                            title: '接口请求失败...',
                            icon: 'none',
                            duration: 3000,
                        })
                    )
                }
            },
            fail: (err) => {
                wx.hideLoading();
                reject(new Error('网络请求失败: ' + err.errMsg));
            }
        });
    });
}

//打开后端返回的地址链接
export function openFileUrl(url = '') {
    return new Promise((resolve, reject) => {
        wx.showLoading({
            title: '加载文件中...',
            mask: true
        });
        if (url) {
            wx.openDocument({
                filePath: url,
                success: resolve,
                fail: (err) => {
                    reject(new Error('文件打开失败: ' + err.errMsg));
                }
            });
        } else {
            wx.hideLoading();
            reject(new Error('未提供有效的URL'));
        }
    });
}
文件大小限制:
  • 建议单文件不超过 10MB
  • 过大文件可能导致打开失败或内存问题
小程序打开文件的核心流程:
  1. 获取文件 → 下载或读取本地文件
  2. 验证文件 → 检查文件是否存在和有效
  3. 打开文档 → 使用 wx.openDocument 打开
  4. 错误处理 → 提供友好的错误提示
相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端