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

发布于:2025-06-21 ⋅ 阅读:(16) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到