js保存自定义内容至本地文件以及二进制流下载

1.js保存自定义内容至本地文件

例如：想要把“hello world”作为内容生成txt文件保存至本地

IE 浏览器：使用微软自带的msSaveBlob 方法，a标签的download属性不支持IE
// for ie 10 and later
    if (window.navigator.msSaveBlob) {
        try {
            window.navigator.msSaveBlob(url或blob,downloadFileName);
        }
        catch (e) {
            console.log(e);
        }
    }

（兼容Chrome和Firefox）
saveContent = (content, fileName) =>{
    let downLink = document.createElement('a');
    downLink.download = fileName;
    //字符内容转换为blod地址
    let blob = new Blob([content]);
    downLink.href = URL.createObjectURL(blob);
    // 链接插入到页面
    document.body.appendChild(downLink);
    downLink.click();
    // 移除下载链接
    document.body.removeChild(downLink)
};

content是需要下载的内容(字符串)

fileName是保存的文件的名字

原理就是利用Blob对象把需要下载的内容转换为二进制，然后借助<a>标签的href属性和download属性，实现下载。


使用：
let str = 'hello world';
let fileName = '示例.txt'

this.saveContent(str, fileName)

2.接受后台返回二进制流进行文件下载到本地

例如：接口返回数据格式如下图
通过a标签动态下载

handelDownLoad = (id) => {
	
	// 动态设置请求后台接口时请求头（以下载pdf为例子）
    let header = {
      "Content-type": 'application/pdf',
      "charset" : "utf-8",
    };

    ajax.get(`url`, null, header).then(res=>{
      let result = res.data;//后台返回的二进制流
      let fileName = '示例'; // 下载文件名（也可通过后台参数动态设置文件名）
      
      if(result){

        if(result.code && result.msg){
          notification.error({
            description: res.msg
          });
          return
        }

        
        const url = window.URL.createObjectURL(
          new Blob([result], {type: "application/pdf"})
        );
        const link = document.createElement('a');

        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', decodeURI(fileName));
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
      }
    })
  };