前端处理文件下载(导出)

117 阅读1分钟

1. 文件下载(导出)

① 后端指定一个下载url地址,通过使用a链接下载;

{
    ....
    const link = document.createElement('a');
    link.style.display = 'none';
    // link.href = `url地址`;
    if(window.location.contextPath){
        link.href = `下载url地址`;
    }else{
        link.href = `下载url地址`;
    }
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
    ....
}

② 后端返回一个文件流,使用file-saver

//使用file-saves导出文件
1)首先下载依赖
npm install file-saver --save
2)使用
...
exportItem(data).then((res) => {
    var FileSaver = require("file-saver");
    const data = res;//后端返回文件流res
    var blob = new Blob([data], {
      type: "text/xls,charset=UTF-8",//设置导出文件的格式
      //常见格式
      //"text/xls"、"text/plain"
    });
    FileSaver.saveAs(blob, "建议提案台账.xls");
});
...