js 下载文件的几种方法

1. 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);
}

2. 打开一个新页面利用浏览器自带的下载功能

• 缺点：弹出新页面，用户体验不好，无法使用 post 方式

window.open(xxx)

3. 创建一个 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();

4. 创建一个可以加载资源的标签,比如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);