前端开发中 常用 到的下载方式: 除了以上几种通用性方案,在JQuery时期还会经常使用到 form 表单提交等方式,但是随着Vue、React的兴起,一般在进行选型时便很少使用form表单提交的形式了。 简单下载方式,通过a标签的href属性加载下载url,适合普通场景下的简单下载。 关于优先级 Causes the browser to treat the linked URL as a download. Can be used with or without a filename value: 关于响应头Content-Disposition Content-Disposition 是一个 HTTP 响应头,它指定了如何显示响应的内容,特别是对于以附件形式下载的文件。这个头部可以包含一个内联展示(inline)的选项,也可以包含一个附件(attachment)的选项,以及可选的文件名参数。 主要作用如下: 欢迎补充其他实现思路文件下载实践方案汇总
方案1:a标签下载
适合场景
不适合场景
?? 应用示例
<a
href="https://images.unsplash.com/photo-1682687982468-4584ff11f88a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=neom-xDQKvPjxtxo-unsplash.jpg"
download="demo">下载图片</a>
function downLoadFile(res){
const ele = document.createElement('a');
ele.setAttribute('href',res.url); //设置下载文件的url地址
ele.setAttribute('download' , 'download');//用于设置下载文件的文件名
ele.click();
link.addEventListener('click', (event) => {
event.preventDefault();
const downloadTimer = setTimeout(() => {
alert('下载超时,请重试!');
}, 5000);
const errorListener = () => {
clearTimeout(downloadTimer);
alert('下载失败!');
link.removeEventListener('error', errorListener);
};
link.addEventListener('error', errorListener);
});
}
window.onload = function(){
$.ajax({
url:"api/file/download",
type:"get",
dataType:'JSON'
}).then(function(res){
if(res.bizNO > 0 ){
downLoadFile(res);
}else{
alert(res.bizMsg);
}
}).always(function(){
alert("连接异常");
})
}
扩展说明
方案2: Blob 下载
基础概念
适合场景
代码实现
function fileDownLoad(data){
// 1. 创建点击下载的元素
var linkElement = document.createElement('a');
// 2. 判断浏览器是否支持blob对象
try{
//该实例化的方式第一个参数必须是数组的格式
var blob = new Blob([data],{
type: "application/pdf"
});
}catch(e){
//旧版本浏览器下的blob创建对象
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if(e.name == 'TypeError' && window.BlobBuilder){
var blobbuilder = new BlobBuilder();
BlobBuilder.append(data);
var blob = blobbuilder.getBlob("application/pdf");
}else{
alert("浏览器版本较低,暂不支持该文件类型下载");
}
}
// 提取blob文件中的url信息,使二进制文件在不读取到js中时直接下载
let url = window.URL.createObjectURL(blob);
linkElement.setAttribute('href',url);
linkElement.setAttribute('downLoad','download');
linkElement.click();
// 释放URL内存
window.URL.revokeObjectURL(url);
}
document.querySelector('#fileInput').addEventListener('change', (event)=>{
fileDownLoad(event.target.files[0])
})
function downloadFileWithToken(url, token) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader("Authorization", token);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status === 200) {
let blob = this.response;
let fileName = '下载的文件名称';
// 针对IE浏览器
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(blob, fileName);
} catch (e) {
console.log(e);
}
} else {
// 通用浏览器
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
} else {
alert('下载文件失败');
}
}
xhr.send();
}
方案3:FileSaver实现
基础介绍
基础使用
import FileSaver from 'file-saver'
let blob = new Blob(["Hello, FileSaver! Blob 下载"], {type: "text/plain;charset=utf-8"});
window.saveAs(blob, "hello FileSaver.txt");
import FileSaver from 'file-saver'
let blob = new Blob(["Hello, FileSaver! URL 下载"], {type: "text/plain;charset=utf-8"});
const url = window.URL.createObjectURL(blob)
window.saveAs(url, "hello FileSaver.txt");
原理介绍
原文链接:https://juejin.cn/post/7316737302113910822