当前位置: 首页 > news >正文

JS-文件下载,实现在ios也是下载 而不是预览,

需求

通过A链接的方式,把从后台获取到的文件下载到本地,实现在移动端,PC端都能下载

问题

通过ajax请求后端生成的文件流之后,创建BLOB文件进行下载,在PC端和移动安卓端都可以实现下载到本地和对应的手机,而在IOS端的话,是直接预览对应的blob文件地址 而不是下载对应的文件流,解决在IOS上也能实现下载(仅限Safari浏览器)

步骤

1.通过request,responseType的值为 'arraybuffer',请求对应的文件流

uni.request({...handleRes,responseType: 'arraybuffer',success(res) {// console.log(res, '返回数据');// 这是返回的文件流const file = res.data;},fail() {uni.hideLoading();}})

2.通过将文件流转成blob对象

let blob = null;if (headerDis.indexOf(tyepList.toString()) != -1) {blob = new Blob([file], {type: 'application/octet-stream;charset=UTF-8',})} else {blob = new Blob([file], {type: headerInfo['content-type'] ||'application/octet-stream;charset=UTF-8',})}

3.通过创建A链接,通过download属性进行下载

async linkTodownloadFile(blob, fName) {if (window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveBlob(blob, fName);return false;}const url = window.URL.createObjectURL(blob)const link = document.createElement('a')link.style.display = 'none'link.href = url;link.setAttribute('download', fName)document.body.appendChild(link)if (document.all) {link.click();} else {// 兼容 Firfoxconst evt = document.createEvent('MouseEvents');evt.initEvent('click', true, true);link.dispatchEvent(evt);}document.body.removeChild(link) // 下载完成移除元素window.URL.revokeObjectURL(url);uni.hideLoading();common.toast(107)}

注意:这里需要主要的在IOS端如果自定义blob的type的话  download属性就只加文件名 而不需要后缀,会形成双重后缀.而且如果类型为steam的话就会是预览  而设置成steam的话就会直接下载文件,也就是第二步做的判断原因

4.完整的代码

uni.request({url : 'xxx',responseType: 'arraybuffer',success(res) {// console.log(res, '返回数据');const file = res.data;const headerInfo = res.header;/** 获取文件名称 */let fName = '';/** 判断是否为可自定义类型还是默认 */const tyepList = ['pdf'];const headerDis = headerInfo['content-disposition'];if (headerDis) {const requestFileInfo = headerDis.split(';')[1];if (store.state.app.SYSTEM_INFO.platform == 'ios') {if (headerDis.indexOf(tyepList.toString()) != -1) {fName = requestFileInfo;} else {fName = requestFileInfo.split('.')[0];}} else {fName = requestFileInfo;}} else {/** 判断文件是否有类型,没有就拿效应头 */const fType = file.type || headerInfo['content-type'].split(';')[0];for (const key in fileTypeConfig) {if (fileTypeConfig[key].indexOf(fType) != -1) {if (store.state.app.SYSTEM_INFO.platform == 'ios') {fName = `${fileName}`;} else {fName = `${fileName}.${key}`;}break}}}/** 开始下载 */let blob = null;if (headerDis.indexOf(tyepList.toString()) != -1) {blob = new Blob([file], {type: 'application/octet-stream;charset=UTF-8',})} else {blob = new Blob([file], {type: headerInfo['content-type'] ||'application/octet-stream;charset=UTF-8',})}/** 判断是否为JSON 做逻辑处理 */if (fName.indexOf('json') != -1) {//通过FileReader读取数据const reader = new FileReader();// reader.readAsBinaryString(blob);reader.readAsText(blob, 'utf8');reader.onload = function() {var content = JSON.parse(this.result); //这个就是解析出来的数据if (content.code == 200) {// common.toast(fName);that.linkTodownloadFile(blob, fName);resolve();} else {isLoading && uni.hideLoading();common.toast(content.msg || 400);}}} else {// common.toast(fName);that.linkTodownloadFile(blob, fName);resolve();}},fail() {uni.hideLoading();common.toast(108)reject();}})

5.附件 fileTypeConfig的内容

export default {xls: 'application/vnd.ms-excel',xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',csv: 'text/csv',doc: 'application/msword',docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',pdf: 'application/pdf',ppt: 'application/vnd.ms-powerpoint',pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',png: 'image/png',gif: 'image/gif',jpeg: 'image/jpeg',jpg: 'image/jpeg',mp3: 'audio/mpeg',aac: 'audio/aac',html: 'text/html',css: 'text/css',js: 'text/javascript',json: 'application/json',abw: 'application/x-abiword',arc: 'application/x-freearc',avi: 'video/x-msvideo',azw: 'application/vnd.amazon.ebook',bin: 'application/octet-stream',bmp: 'image/bmp',bz: 'application/x-bzip',bz2: 'application/x-bzip2',csh: 'application/x-csh',eot: 'application/vnd.ms-fontobject',epub: 'application/epub+zip',htm: 'text/html',ico: 'image/vnd.microsoft.icon',ics: 'text/calendar',jar: 'application/java-archive',jsonld: 'application/ld+json',mid: 'audio/midi audio/x-midi',midi: 'audio/midi audio/x-midi',mjs: 'text/javascript',mpeg: 'video/mpeg',mpkg: 'application/vnd.apple.installer+xml',odp: 'application/vnd.oasis.opendocument.presentation',ods: 'application/vnd.oasis.opendocument.spreadsheet',odt: 'application/vnd.oasis.opendocument.text',oga: 'audio/ogg',ogv: 'video/ogg',ogx: 'application/ogg',otf: 'font/otf',rar: 'application/x-rar-compressed',rtf: 'application/rtf',sh: 'application/x-sh',svg: 'image/svg+xml',swf: 'application/x-shockwave-flash',tar: 'application/x-tar',tif: 'image/tiff',tiff: 'image/tiff',ttf: 'font/ttf',txt: 'text/plain',vsd: 'application/vnd.visio',wav: 'audio/wav',weba: 'audio/webm',webm: 'video/webm',webp: 'image/webp',woff: 'font/woff',woff2: 'font/woff2',xhtml: 'application/xhtml+xml',xml: 'text/xml',xul: 'application/vnd.mozilla.xul+xml',zip: 'application/zip,application/x-zip-compressed',}

相关文章:

JS-文件下载,实现在ios也是下载 而不是预览,

需求 通过A链接的方式,把从后台获取到的文件下载到本地,实现在移动端,PC端都能下载 问题 通过ajax请求后端生成的文件流之后,创建BLOB文件进行下载,在PC端和移动安卓端都可以实现下载到本地和对应的手机,而在IOS端的…...

Leetcode.275 H 指数 II

题目链接 Leetcode.275 H 指数 II mid 题目描述 给你一个整数数组 c i t a t i o n s citations citations ,其中 c i t a t i o n s [ i ] citations[i] citations[i] 表示研究者的第 i i i 篇论文被引用的次数, c i t a t i o n s citations citat…...

代码随想录Day40-单调栈:力扣第496e、503m、42h、84h题

496e. 下一个更大元素 I 题目链接 代码随想录文章讲解链接 方法一:单调栈哈希表 用时:13m52s 思路 维护一个栈底到栈顶是单调递减的栈,从后往前遍历数组nums2,更新栈。nums2当前元素nums2[i]的下一个更大元素就是栈顶元素&am…...

Git窗口打开vim后如何退出编辑(IDEA/Goland等编辑器)

最近在学习git高级操作过程中,遇到了一下问题: 我在学习Git合并多个commit为一个的时候,需要输入一个命令 git rebase -i HEAD~2 这说明已经是编辑模式了。当我写好后,我还按照原来在linux上的按下ESC键,但是只是光…...

【CSDN 每日一练 ★★☆】【二叉树/BSF】二叉树的层序遍历

【CSDN 每日一练 ★★☆】【二叉树/BSF】二叉树的层序遍历 二叉树 BSF 题目 给你一个二叉树,请你返回其按 层序遍历 得到的节点值。 (即逐层地,从左到右访问所有节点)。 示例: 二叉树:[3,9,20,null,nul…...

Golang | Zinx学习笔记(一)

参考 http://zinx.me/ https://www.kancloud.cn/aceld/zinx/1960213 https://www.yuque.com/aceld/tsgooa/gx01meg5ow4pftac 说明 zinx是一个基于Golang的轻量级并发服务器框架。 目前zinx已经在很多企业进行开发使用,具体使用领域包括:后端模块的消息中转、长链…...

【Java 进阶篇】在Java Web应用中获取ServletContext对象详解

在Java Web应用开发中,ServletContext对象扮演着重要的角色,它允许你在整个Web应用程序中存储和共享数据。ServletContext对象是Servlet容器提供的一种用于管理Web应用程序的全局信息的方式。本文将详细探讨ServletContext对象的概念、用途以及如何在Jav…...

负债6W,依靠这个项目副业6个月还清欠款,还多存了10W+

真不敢想象负债6W“走投无路”的我还能通过副业逆天翻盘,6个月还清欠款,还让我多了10W存款,现在小日子也是相当滋润,吃穿不愁,不用过多为生计而奔波操劳。 仅代表个人收益 网盘下载地址:【安卓软件】音魔变…...

快速了解ClickHouse!

简介 ClickHouse是一个开源列式数据库管理系统(DBMS),用于在线分析处理(OLAP): 列式存储:与传统的行式数据库不同,ClickHouse以列的形式存储数据,这使得在分析大量数据时…...

PythonWEB

文章目录 前端简介1. 什么是网页2. 网页的组成3. 网页的优势4. 前端三剑客5. 编写步骤6. HTTP协议 HTML51. HTML介绍2. 元素3. 使用4. 基本结构解析5. 常用标签文本标签容器标签列表标签表格标签表单标签 对于文件数据的提交需要满足以下两个条件:6. 标签分类 前端简…...

【工具问题】IDEA每次关闭的时候都会弹框显示closing project,然后弹框持续很久就像卡住了

idea关闭的时候出现问题 问题展示为什么会出现这种情况怎么解决 问题展示 我idea已经关闭了,但是这个弹框要持续很久才能关闭 为什么会出现这种情况 我的plugins原本是加载不出来的,所以我按照网上说法去做 怎么解决 file->setting,再如图选择…...

从瀑布模式到水母模式:ChatGPT如何赋能软件研发全流程

文章目录 前言内容简介作者简介专家推荐读者对象直播预告 前言 计算机技术的发展和互联网的普及,使信息处理和传输变得更加高效,极大地改变了金融、商业、教育、娱乐等领域的运作方式。数据分析、人工智能和云计算等新兴技术,也在不断地影响和…...

类变量/方法、main语法、代码块

一.类变量和方法 思维导图概览: 1.1类变量(静态变量) 1.什么叫做类变量/方法? ——给类中的成员属性或成员方法加上static关键字进行修饰,类变量/方法也叫做静态变量/方法,静态变量/方法被类的自身所有对…...

[SHCTF 校外赛道] crypto

终于都结束了,这些新生赛太漫长了。不过这个也还是有些难度的,好多整不来。抓紧时间整理一下。 week1 第1周基本是古典密码,古典和现代最大的区别是古典全靠猜,现在都是数学 立正 wl hgrfhg 4gNUx4NgQgEUb4NC64NHxZLg636V6CDBi…...

vue3从基础到入门(一)

文章目录 简介提升使用创建脚手架vite 常用Composition APIsetuprefreactive函数响应式vue2响应式vue3实现响应式 reactive对比ref注意计算属性computed函数 监视watch函数watchEffect函数 生命周期hook函数toRef 简介 2020年9月18日,Vue.js发布3.0版本&#xff0c…...

枚举类型 表示不同的 HTTP 状态码和相应的错误消息

java web业务中经常用常量来表示不同的 HTTP 响应状态,比如 public enum AppHttpCodeEnum {// 成功段0SUCCESS(200,"操作成功"),// 登录段1~50NEED_LOGIN(1,"需要登录后操作"),LOGIN_PASSWORD_ERROR(2,"密码错误"),// TOKEN50~100TOKEN_INVALID…...

SAP 使用cl_gui_timer自动刷新屏幕的用法详解 <转载>

原文链接:https://blog.csdn.net/SAPmatinal/article/details/130483382 SAP 使用cl_gui_timer自动刷新屏幕的用法详解 这个类在初始化的时候会设置一个定时间隔,每隔这个时间就会触发一次FINISHED事件。利用这个类的特性,可以实现很多东西&…...

golang中的Interface接口 类型断言、接口赋值、空接口的使用、接口嵌套

Interface整理 文章目录 Interface整理接口嵌套接口类型断言类型判断 type-switch使用方法集与接口空接口实例 接口赋值给接口 接口是一种契约,实现类型必须满足它,它描述了类型的行为,规定类型可以做什么。接口彻底将类型能做什么&#xff0…...

使用设计模式省去大量的if-elsef分支

1.测试类 Testpublic void test7() {/*** 使用设计模式前*///模拟入参String name "?";if("张三".equals(name)){System.out.println("按照张三的策略执行的任务!");}else if ("李四".equals(name)){System.out.println("按照李…...

Tomcat安装与配置文件解读

简介 Tomcat是Apache软件基金会(Apache Software Foundation)项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Tomcat服务器是一个免费的开放源代码的Web应用服务器,属于轻量级应用服务器,在…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...