- ajax 或 fetch 将资源转换为 blob ，利用 a 标签的
download属性或 ie 的saveBlob
- 缺点：如果文件很大，会造成很长时间的 blob 转化，等待很长时间
- 优点：可以使用 get 或 post，同时可以传递 header 参数
// fetch
// const res = await fetch(xxxx)
// const blob = yield res .blob();
// ajax
// cont blob= ajax(xxx)
const bl = new Blob([blob], { type: `application/octet-stream` });
const FN = 'filename.xxx'; // 下载的文件名
if (window.navigator && window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(bl, FN);
} else {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(bl);
link.download = FN;
link.click();
window.URL.revokeObjectURL(link.href);
}
- 打开一个新页面利用浏览器自带的下载功能
- 缺点：弹出新页面，用户体验不好，无法使用 post 方式
window.open(xxx)
- 创建一个
iframe和from，模拟表单提交的方式实现下载
- 缺点：必须使用 post 方式，无法自定义 header 参数
- 优点：可以传递各种 body 参数，静默式
const boxElement = document.createElement('div');
boxElement.style.display = 'display:none;';
const iframeElement = document.createElement('iframe');
iframeElement.style.display = 'none';
iframeElement.name = 'downloadFrame';
const formElement = document.createElement('form');
formElement.style.display = 'none';
formElement.method = 'post';
formElement.action = xxx;
formElement.target = 'downloadFrame';
const inputElement = document.createElement('input'); // 创建提交数据的 input，根据需要可以创建多个
inputElement.type = 'hidden';
inputElement.name = 'field1';
inputElement.value = 'value1';
const buttonElement = document.createElement('button');
buttonElement.type = 'submit';
formElement.appendChild(inputElement);
formElement.appendChild(buttonElement);
boxElement.appendChild(formElement);
boxElement.insertBefore(iframeElement, formElement);
document.body.appendChild(boxElement);
formElement.submit();
- 创建一个可以加载资源的标签,比如
img，script，iframe
缺点：只能使用 get 方式
优点：静默式，代码简单，配合 http 206 的协议可以流式的下载
image
var myImage = new Image(100, 100);
myImage.src = 'xxxx';
- script
var script = document.createElement('script')
script.src = 'xxx';
document.body.appendChild(script);
- iframe
var iframeElement = document.querySelector('#download')
if (!iframeElement) {
iframeElement = document.createElement('iframe');
iframeElement.setAttribute('id', 'download');
iframeElement.style.display = 'none';
}
iframeElement.src = 'xxx'
document.body.appendChild(iframeElement);
