开发过程中移动端实现文件下载

First step: 建js文件，添加如下代码

/*** 通过文件类型来返回blob数据类型* @param {*} fileType* @returns*/
function getFileTypeMime (fileType) {switch (fileType) {// 若无对应fileType，会导致在移动端无法下载/打开该文件或者空白// 若不加，则移动端无法打开// https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types.case 'png':return 'image/png'case 'doc':return 'application/msword'case 'docx':return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'case 'jpg':case 'jpeg':return 'image/jpeg'case 'gif':return 'image/gif'case 'svg':return 'image/svg+xml'case 'tif':case 'tiff':return 'image/tiff'case 'txt':return 'text/plain'case 'ppt':return 'application/vnd.ms-powerpoint'case 'pptx':return 'application/vnd.openxmlformats-officedocument.presentationml.presentation'case 'xls':return 'application/vnd.ms-excel'case 'xlsx':return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'case 'zip':return 'application/zip'case '7z':return 'application/x-7z-compressed'case 'pdf':return 'application/pdf'case 'mp3':return 'audio/mpeg'}
}
/*** 下载文件*/
export default async (blobData, fileName = '', fileType = '') => {const fileTypeMime = getFileTypeMime(fileType)if (!blobData) returnlet blob = new Blob([blobData], {type: fileTypeMime})const blobUrl = window.URL.createObjectURL(blob)const a = document.createElement('a')a.download = fileNamea.href = blobUrla.target = '_blank'a.click()window.URL.revokeObjectURL(blobUrl)
}

Second step: 然后需要在请求头添加：

responseType: 'blob',

Third step: 最后在接口请求文件调用js文件，处理结果时调用downloadFile()即可

import downloadFile from '**/downloadFile'const type = 'docx' // 文件格式
downloadFile(res.data,`${name}.${type}`,type) // name：下载之后想要的文件名

微信端需要判断机型的话可使用如下代码：

 // 判断机型
getUA (userAgent) {if (userAgent && typeof userAgent === 'string') {return userAgent}return navigator.userAgent
},
if (this.getUA().match(/Android/i)){// Android
} else {// ios
}

开发过程中移动端实现文件下载相关推荐

开发过程中快速抓包并解析
开发过程中快速抓包并解析这几天小编在工作中遇到了一个灵异事件,客户端使用的是安卓原生系统,服务端使用的是java.需求就是客户端在照相的时候可以实时上传照片.后台接收并保存,并且可以在平台上显示.看 ...
web开发过程中经常用到的一些公共方法及操作
进化成为程序猿也有段岁月了,所谓的经验,广度还是依旧,只不过是对于某种功能有了多种实现方式的想法.每天依旧不厌其烦的敲打着代码,每一行代码的回车似乎都有一种似曾相识的感觉.于是乎:粘贴复制,再粘贴再复 ...
Asp.net开发过程中，我们会遇到很多Exception
在Asp.net开发过程中,我们会遇到很多Exception,不处理这些Exception的话会出现很难看的页面. 还有一些我们未预料到的Exception,当发生Exception时,我们也必须进行 ...
关于开发过程中的空指针问题
关于开发过程中的空指针问题从以下角度来说明怎么在一定程序上,合理避免这个问题. public字段的使用多层局部变量调用所产生的NullPointException问题 public字段的使用其实 ...
浅谈Taro和Apollo在开发过程中的实践
一.什么是Taro Taro是凹凸实验室研发的一套遵循React语法规范的多端开发的解决方案.使用Taro,可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度 ...
微服务开发过程中需要注意的若干事项
微服务,说比做容易!我们更关注怎样将这种架构设计思想融入到实际工作中,微服务更关注各服务之间的调用.管理,它追求软件研发过程中的自动化,例如:自动编译.打包.发布,自动化运维等等,这里的每一个自动化的 ...
Java开发过程中需要注意的技巧有哪些？
在Java工程师平常的开发过程中,由于业务的不同,可能关注的点有很多不一样的地方,但是在基础层面还是有一些共性的.此文概括了在Java开发.测试.部署.工程化方面一些需要注意的地方,供大家参考. 将一 ...
Profibus-DP智能从站开发过程中若干核心问题的探讨
Profibus-DP智能从站开发过程中若干核心问题的探讨 2007-7-13 10:59:00 胥军供稿 1 引言随着Profibus总线技术在我国的进一步普及,基于Profibus-D ...
一键部署开箱即用的代理服务器，解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

开发过程中移动端实现文件下载

开发过程中移动端实现文件下载相关推荐

最新文章

热门文章