uni-app 实现微信小程序手机端下载附件到本地文件夹(如.docx .ppt .txt .excel文件等)
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);
// 提示用户下载失败
});
}
}
注意事项
- 权限:确保你的微信小程序已经申请并获得了用户文件存储的权限。
- 路径:
wx.env.USER_DATA_PATH
是微信小程序提供的用户文件存储根目录路径。 - 文件大小:对于大文件,可能需要考虑分片下载或使用其他优化策略。
- 文件类型:上述代码不限制文件类型,只需确保URL正确且服务器支持相应的MIME类型。
通过上述代码,你可以在uni-app中实现微信小程序手机端下载附件并保存到本地文件夹的功能。