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

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)
		}
	})
},
相关推荐
文人sec35 分钟前
微信小程序minium自动化测试SOP
微信小程序·小程序
克里斯蒂亚诺更新38 分钟前
微信小程序 点击地图后弹出一个模态框
微信小程序·小程序·notepad++
云起SAAS39 分钟前
患者随访管理抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·患者随访管理
2501_9160088944 分钟前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump
xiaohe06011 小时前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
2501_9159090614 小时前
WebView 调试工具全解析,解决“看不见的移动端问题”
android·ios·小程序·https·uni-app·iphone·webview
说私域15 小时前
“开源链动2+1模式AI智能名片S2B2C商城小程序”在拉群营销中的应用与效果
人工智能·小程序
2501_9151063216 小时前
App 怎么上架 iOS?从准备资料到开心上架(Appuploader)免 Mac 上传的完整实战流程指南
android·macos·ios·小程序·uni-app·iphone·webview
行走的陀螺仪18 小时前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
小禾青青18 小时前
uniapp安卓打包遇到报错:Uncaught SyntaxError: Invalid regular expression: /[\p{L}\p{N}]/
android·uni-app