uniapp开发小程序，导出文件打开并保存，实现过程downloadFile下载，openDocument打开

kq-blue2025-06-21 20:25

uniapp开发小程序，导出文件打开并保存

实现思路

1、调用请求获取到后端接口返回的下载文件的url路径（注意必须是https的路径，域名需要配置在微信小程序后台的合法域名里面）

2、使用 uni.downloadFile 方法（下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。）

3、使用 uni.openDocument(OBJECT)方法

新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。

建议给用户添加一句提示，下载下来的文件会自动打开

复制代码

// html
<view class="submitBtn btn" @click="submitExport">导出</view>


submitExport(){
	uni.showModal({
		content:"导出的Excel文件将自动打开，请点击右上角"更多"选择保存",
		title:"温馨提示",
		success(res) {
			if(res.confirm){
				this.export()
			}
		}
	})
},
export(){
// 请求用自己项目的封装请求，我这用了我自己项目的
	this.$http.mallbusiness({
		url: "写自己后端给的接口",
			data: this.queryString,
			type: "queryString",
		}).then(res => {
		if (res.code == 200) {
			uni.downloadFile({
				url: res.data,
				success: (downloadRes) => {
					console.log(downloadRes,"downloadRes")
					if (downloadRes.statusCode === 200) {
						// 文件临时路径
						const tempFilePath = downloadRes.tempFilePath;
						
						//打开文件
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: () => {
								this.$u.toast("导出成功！");
								this.exportClose()
							},
							fail: (err) => {
								console.error('打开文件失败', err);
								this.$u.toast("文件已下载，但无法打开");
							}
						});
					} else {
						this.$u.toast("下载失败，请重试");
					}
				},
				fail: (err) => {
					console.error('下载文件失败', err);
					this.$u.toast("下载失败，请重试");
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		} else {
			this.$u.toast(res.message)
		}
	})
},