前端实现文件下载的解决方案
-
a标签实现文件下载
H5中的a标签加download属性可以实现文件的下载。download 属性定义了下载链接的地址,href 属性必须在a标签中指定。属性同样可以指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。该属性需要下载资源是同源的。
<a href="/images/logo.png" download="/images/logo.png">
a标签的方式对浏览器有局限性,可查看 https://www.runoob.com/tags/att-a-download.html 。
-
使用第三方库来实现:download.js
-
Github 地址:https://github.com/rndme/download
-
本站下载地址:https://static.runoob.com/download/download-master.zip
-
CDN 库:https://cdn.staticfile.org/downloadjs/1.4.8/download.min.js
-
NPM 安装:npm install downloadjs
download.js 库提供了 download() 函数用于下载文件。
下载内容可以是 URL、字符串、Blob 或类型化的数据数组,或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。
无论输入格式如何,download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。
download(data, strFileName, strMimeType)
实例
-
文本
// 将字符串存储到 dlText.txt 文件中并下载: download("hello world", "dlText.txt", "text/plain"); // dataURL 文本实例: download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain"); // blob 文本实例: download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain"); // url 实例: download("/robots.txt"); // UInt8 文本数组实例: const str= "hello world"; const arr= new Uint8Array(str.length); str.split("").forEach(function(a,b){ arr[b]=a.charCodeAt(); }); download( arr, "textUInt8Array.txt", "text/plain" );
-
HTML
// html 字符串实例: download(document.documentElement.outerHTML, "dlHTML.html", "text/html"); // html Blob 实例: download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
-
二进制文件
// 图片 URL: download("/diff6.png");
-
-
-
通过window.open/window.location.href的方式
注意: 文件名称为中文时要使用 encodeURI 转码;下载文件格式为 图片 或 txt 时文件会直接打开
// 根据文件名下载: window.location.href = `${url}/文件名.xlsx`; // 文件名有中文: window.location.href = `${url}/${encodeURI("文件名.xlsx")}`;
-
let upload = function (res, defaultName, type) { let fileName = null,fileInfoBool = false; const content = res; const blob = new Blob([content]); const date=new Date(); if (!fileInfoBool){ fileName = defaultName+"."+type; } if ("download" in document.createElement("a")) { // 非IE下载 const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = URL.createObjectURL(blob); window.open = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); document.body.removeChild(elink); } else { // IE10+下载 navigator.msSaveBlob(blob, fileName); } } export default upload
使用方式:
import upload from './upload.js'; upload(res, '模板', 'xls'); // res 是后台返回的文件流