uni-app 实现微信小程序手机端下载附件到本地文件夹(如.docx .ppt .txt .excel文件等)

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 实现微信小程序手机端下载附件到本地文件夹(如.docx .ppt .txt .excel文件等)

1 回复

在uni-app中实现微信小程序手机端下载附件到本地文件夹,可以使用微信小程序提供的文件系统API。以下是一个示例代码,展示了如何下载不同类型的附件(如.docx, .ppt, .txt, .excel等)并保存到本地。

首先,确保你已经在manifest.json中配置了微信小程序的AppID,并且已经使用HBuilderX或其他开发工具创建了一个uni-app项目。

1. 下载并保存附件的函数

// 下载并保存附件到本地
async function downloadAndSaveFile(url, filePath, fileName) {
    try {
        // 使用uni.request下载文件
        const res = await uni.request({
            url: url,
            method: 'GET',
            responseType: 'arraybuffer' // 关键:设置返回类型为arraybuffer
        });

        // 将文件数据保存到本地
        const tempFilePath = `${wx.env.USER_DATA_PATH}/${fileName}`;
        const fs = wx.getFileSystemManager();
        
        // 创建写入流
        const writeStream = fs.createWriteStream({
            filePath: tempFilePath,
            flags: 'w',
        });

        // 写入数据到文件
        await new Promise((resolve, reject) => {
            writeStream.write(res.data, () => {
                writeStream.close(() => {
                    resolve();
                });
            });
            writeStream.onError((err) => {
                reject(err);
            });
        });

        // 返回文件路径
        return tempFilePath;
    } catch (error) {
        console.error('下载文件失败:', error);
        throw error;
    }
}

2. 调用下载函数

假设你有一个按钮点击事件触发下载,可以在页面的methods中添加以下代码:

methods: {
    handleDownload() {
        const fileUrl = 'https://example.com/path/to/your/file.docx'; // 替换为实际的文件URL
        const fileName = 'downloaded_file.docx'; // 设置保存的文件名

        downloadAndSaveFile(fileUrl, wx.env.USER_DATA_PATH, fileName)
            .then(filePath => {
                console.log('文件已保存到:', filePath);
                // 这里可以添加打开文件或提示用户的逻辑
            })
            .catch(error => {
                console.error('文件保存失败:', error);
                // 提示用户下载失败
            });
    }
}

注意事项

  1. 权限:确保你的微信小程序已经申请并获得了用户文件存储的权限。
  2. 路径wx.env.USER_DATA_PATH是微信小程序提供的用户文件存储根目录路径。
  3. 文件大小:对于大文件,可能需要考虑分片下载或使用其他优化策略。
  4. 文件类型:上述代码不限制文件类型,只需确保URL正确且服务器支持相应的MIME类型。

通过上述代码,你可以在uni-app中实现微信小程序手机端下载附件并保存到本地文件夹的功能。

回到顶部