当前位置: 首页 > 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应用服务器,属于轻量级应用服务器,在…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...