uniapp下载文件的方案,包括H5,App方案解决办法

news2024/11/5 19:39:39

1. 在uniapp需要下载文件,但是显示情况是不能下载。所以只能使用该办法来进行下载。

2. 这有一个注意点是:如果你做的是H5的方案,那么我已经替你踩好坑了,UC浏览器是不支持blob类型的下载,以及创建a标签的方案来进行下载。目前发现只有QQ浏览器支持这两种方案。如果你是保密单位,QQ浏览器其实也是可以,因为也是国产化的浏览器。

代码体现:

首先获取后端给你返回的文件下载地址:

mounted() {
			this.fatIdList = this.config.modelId
			this.$refs.uToast.show({
				type: 'warning',
				icon: false,
				title: '若UC浏览器无法下载模板,请使用QQ浏览器下载!',
				duration: 3000,
			})
			deliverDownloadApi(this.fatIdList, {
				"currentPage": 1,
				"pageSize": 20,
				"sort": "desc",
				"sidx": "",
				"menuId": this.fatIdList,
				"queryJson": "",
				"superQueryJson": '',
				"idList": [],
				"dataType": "1",
				"selectKey": []
			}).then(data => {
				this.fileUrl = this.define.baseURL + data.data.url
				this.download()
			})
		},

第二步:调取uniapp的原始下载方法uni.downloadFile

// 点击下载
			download() {
				setTimeout(() => {
					// 更多参数,详见文档
					// https://uniapp.dcloud.net.cn/uni-app-x/api/download-file.html#downloadfile
					uni.downloadFile({
						url: this.fileUrl, //下载地址
						header: this.header, //HTTP请求Header
						timeout: 150000, //下载超时时间(毫秒)
						success: (res) => {
							// 利用临时地址调起下载
							this.arouse(res)
						},
						fail: (err) => {
							console.log('下载失败', err)
						}
					})
				}, 3000)
			},

第三步:

创建a标签的方法来下载:

// 利用临时地址调起下载
			arouse(res) {
				let date = new Date()
				let file_name = '退换货管理(标准化)' + this.dateFormat(date)
				// eslint-disable-next-line camelcase
				let file_type = 'xlsx'
				// console.log(res)
				var oA = document.createElement("a")
				// 设置下载的文件名
				oA.download = `${file_name}.${file_type}`
				// Blob临时路径再保存到本地
				oA.href = res.tempFilePath
				// 插入DOM并执行点击下载
				document.body.appendChild(oA)
				oA.click()
				oA.remove()
			},

第四步:直接打开QQ浏览器开始下载 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2231383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ubuntu】双系统无grub引导菜单中没有windows引导项

无GRUB选择系统界面 修改一下配置即可 # 1. 更新下工具 sudo apt update sudo apt install vim# 2. 修改引导设置 sudo vim /etc/default/grub按i编辑, 编辑好ESC推出到控制模式,shift: 输入wq 回车保存 修改GRUB_TIMEOUT_STYLE改为菜单模式 # 3. 修改…

六 在WEB中应用MyBatis(使用MVC架构模式)

六、在WEB中应用MyBatis(使用MVC架构模式) 实现功能: 银行账户转账 使用技术: HTML Servlet MyBatis WEB应用的名称: bank 6.1 需求描述 6.2 数据库表的设计和准备数据 6.3 实现步骤 第一步:环境…

Rust 力扣 - 73. 矩阵置零

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们使用两个变量记录矩阵初始状态的第一行与第一列是否存在0 然后我们遍历矩阵(跳过第一行与第一列),如果矩阵中元素为0则将该元素映射到矩阵第一行与矩阵第一列的位置置为0…

ExpandingCard扩展卡片

文章目录 演示效果分析思路核心代码总结 源码 演示效果 分析思路 使用flex布局,每个卡片的宽度都由flex进行灵活调整交互可以增加和删除active,来实现宽度扩增和恢复还需要使用transition进行动画过渡,使得平滑切换 核心代码 首先创建一个…

QT找不到ffmpeg链接库解决方法

error: undefined reference to avformat_network_init() 一个神奇的报错,查了很久,检查步骤: 1、检查了 pro工程文件 2、链接库的真实性和正确性 在main.cpp中调用没有报错,在其它cpp文件中调用就报错。 破案了,…

【Python单元测试】pytest框架单元测试常用用例

【Python单元测试】pytest框架单元测试 配置 命令行操作 测试报告 覆盖率 常用用例 本文重点介绍使用的Mock写法, pytest的基本用法,非本文重点。 pytest 相较于unittest, 写法更加简便。对测试用例直接assert是否符合预期即可 # 定义mock对象, 测试…

OmniGen: Unified Image Generation(代码的复现)

文章目录 论文简介模型的部署需要下载的预训练权重 模型的生成效果图像编辑的效果风格迁移的效果 总结 论文简介 OmniGen的github项目地址 OmniGen: Unified Image Generation。OmniGen 在各种图像生成任务中都表现出了卓越的性能,并可能大大超过现有扩散模型的极…

景联文科技医疗数据处理平台:强化医疗数据标注与管理,推动医疗数字化新篇章

随着医疗科技快速进步与广泛应用,医疗信息的规模正在迅速扩张,如何有效管理这些医疗数据成为了关键议题。 医疗数据不仅包括传统的纸质病历,还有电子病历、实验室检测结果、医学影像等多样化的数字信息。为确保这些数据能为临床决策、科研分析…

在线学习新体验:SpringBoot精品试题库系统

1 绪论 1.1 研究背景 现在大家正处于互联网加的时代,这个时代它就是一个信息内容无比丰富,信息处理与管理变得越加高效的网络化的时代,这个时代让大家的生活不仅变得更加地便利化,也让时间变得更加地宝贵化,因为每天的…

Fluent Editor 富文本开源2个月的总结:增加格式刷、截屏、TypeScript 类型声明等新特性

你好,我是 Kagol,个人公众号:前端开源星球。 Fluent Editor 是一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了丰富的模块和格式,框架无关、 功能强大、开箱即用。 2024年8月12日,Fluent Edito…

redis v6.0.16 安装 基于Ubuntu 22.04

redis安装 基于Ubuntu 22.04 本文演示如何在ubuntu22.04下,安装redis v6.0.16,并配置测试远程访问。 Step1 更新环境 sudo apt updateStep2 安装redis sudo apt install redis-server -yStep3 启动 sudo systemctl restart redissudo systemctl sta…

python画出圣诞树(简易版,matplotlib.pyplot) 代码实现

需求 使用python的turtle库绘制圣诞树 绘制结果 代码实现 import matplotlib.pyplot as plt import matplotlib.patches as patches import numpy as npdef draw_christmas_tree(ax):# 定义树的基本参数base_width 6 # 底部宽度height 12 # 总高度levels 3 # 层次数量…

【1个月速成Java】基于Android平台开发个人记账app学习日记——第4天,注册登录逻辑代码

24.11.03 1.输入手机号跳转功能 第一个要设计的功能是,输入手机号以后跳转到另一个页面,输入获取得到的验证码页面。先拿这个功能练练手。 首先看一下此时的完整项目结构: 主要是添加了2个活动类和对应的界面,下面看详细的代码…

使用GraphQL构建现代API

使用GraphQL构建现代API GraphQL简介 安装GraphQL 使用npm安装GraphQL 使用Yarn安装GraphQL 创建GraphQL服务器 定义Schema 编写Resolver 查询数据 变更数据 使用Apollo Client GraphQL订阅 数据验证 错误处理 分页查询 拆分和组合Schema 总结 随着API的发展,传统…

炒到天价的数字头像如何用AI制作——教你用Midjourney轻松打造像素风NFT头像

​ ​ 近年来,NFT数字头像成了热门话题,许多以像素风格为主的头像被炒到天价,像最近比较火的星球兽头像。 它们之所以备受追捧,不仅是因为视觉风格独特,更是因其在NFT领域的稀缺性。 那如果想自己制作一个像素风头像…

网络层2--IP协议

目录 一、虚拟互连网络 二、IP地址 1、IP地址表示方法 2、IP地址分类 3、无分类编址CIDR (1)网络前缀 (2)地址块 、 地址掩码 4、IP地址特点 5、地址解析协议ARP (1)原理 (2&#xf…

进程间通信(命名管道 共享内存)

文章目录 命名管道原理命令创建命名管道函数创建命名管道 共享内存原理shmgetFIOK 代码应用:premsnattch 命名管道 用于两个毫无关系的进程间的通信。 原理 Linux文件的路径是多叉树,故文件的路径是唯一的。 让内核缓冲区不用刷新到磁盘中&#xff0c…

基于SSM+小程序的计算机实验室排课与查询管理系统(实验室2)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 1、管理员功能有个人中心,学生管理,教师管理,实验室信息管理,实验室预约管理,取消预约管理,实验课程管理&#xff0…

基于STM32的农业监测与管理系统设计思路介绍(代码示例)

一、项目概述 在全球农业现代化进程中,农业监测与管理系统的研发具有重要意义。本文介绍的基于STM32的农业监测与管理系统,旨在通过智能小车实现对农作物的环境监测、土壤检测等功能。该系统利用手势控制技术,农民可以通过简单的手势指令来操…

分布式架构搭建博客网站

目录 运行环境基础配置需求准备工作配置静态ip修改主机名及host映射开启防火墙时间同步配置免密ssh登录 环境搭建Server-Web端安装LNMP环境软件Server-NFS-DNS端上传博客软件Server-NFS-DNS端设置NFS共享Server-Web设置挂载远程共享目录nginx设置在数据库中创建数据库和用户重启…