前端文件下载导出

1、固定的静态资源-后台返回资源url

• 使用location.href的方式打开连接，让浏览器去自动下载

    window.location.href="http://www.域名/fileDir/fileName.jpg(文件名)"

• 使用a标签href、download属性

    const aElement = document.createElement('a'); //动态创建a标签
    aElement.style.display = 'none'; //可以设置a标签并不可见
    aElement.href = blobUrl; //a标签的href为返回的url
    aElement.download = filename;
    document.body.appendChild(aElement); //将创建的a标签追加到body内
    aElement.click();
    document.body.removeChild(aElement);

缺点：
    1、无法另外指定文件名称，只能是资源路径自带的文件名
    2、另外在ie环境下会产生弹框
 

2、后台返回文件流

• 后台返回的是arraybuffer的内容。借助blod实现，代码微调下即可。

    // data为后台返回的内容
    let blob = new Blob([data], { type: 'application/x-www-form-urlencoded' }); 
    let blobUrl = window.URL.createObjectURL(blob);
    const element = document.createElement('a'); 
    element.style.display = 'none'; // 设置a标签并不可见，避免触发重绘
    element.href = blobUrl; 
    element.download = filename; // 指定文件名
    document.body.appendChild(element); 
    aElement.click();
    document.body.removeChild(element);
    window.URL.revokeObjectURL(blobUrl); // 释放内存

缺点：
     1、不支持IE, IE下会出现 “Unhandled promise rejection Error: 拒绝访问。”

3、兼容ie环境

• 使用微软自带的msSaveBlob 方法

    // data为后台返回的内容
    let fileName = 'test.jpg'
    let blob = new Blob([data], { type: 'application/x-www-form-urlencoded' }); 
    let blobUrl = window.URL.createObjectURL(blob);
    try { 
        window.navigator.msSaveBlob(blob, fileName) 
    } catch (e) {
        console.log(e); 
    }

最后

记录平常遇到的一些问题，每天进步一点点，只要努力、坚持，有信心，就能心想事成。