H5 页面中下载文件在Android 和 Ios 上的区别及坑点
1、使用a标签,需加上download (下载文件的名称)属性才行。
区别:
一: 在 Android上可以下载。
二: 在Ios 上是直接打开文件。
2、使用浏览器自带的下载文件的功能,将文件转为二进制的数据流,代码如下:
axios({ url, method: "get", resposeType: "arraybuffer" }).then(res => { console.log(res) const { data, headers } = res; const fileName = transFileUrl(url) // 文件名称 saveImage(data, headers, fileName) }) } const transFileUrl = (url) => { return url && url.slice(url.lastIndexOf('/') + 1) } const saveImage = (data, headers, fileName) => { const blob = new Blob([data], { type: headers['content-type'] }) // 二进制数据流 saveAs(blob, fileName) } const saveAs = (blob, fileName) => { const url = window.URL.createObjectURL(blob); // 创建一个DOMString, 获取当前文件的一个内存URL const link = document.createElement("a"); link.href = url; link.download = fileName; link.click(); URL.revokeObjectURL(url); }
以上为个人平日总结, 若有不足之处,还望各位包含,赐教。