前端通过后端返回的文件流，下载内容到本地

1.接口 

/**
 * 数据列表导出
 * @returns
 */
getAuditExport() {
return request({
url: '接口地址',
method: 'get',
responseType: 'blob', // 响应数据类型
})
},

 2.使用

// 数据导出
function exportData() {
    // 通过接口获取文件流
  api.getAuditExport().then(res => {
    // console.log(res);
    var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 获取Blob对象
    var url = window.URL.createObjectURL(blob); // 创建URL
    var a = document.createElement('a'); // 创建下载链接
    a.href = url;
    a.download = '文件名称.xlsx'; // 设置下载文件名
    document.body.appendChild(a); // 将链接添加到页面中
    a.click(); // 触发下载
    document.body.removeChild(a); // 移除链接
    window.URL.revokeObjectURL(url); // 释放URL资源
  })
}

3.方法2

   // 这个接口需要token，不需要就不加
   const course_token = localStorage.getItem('course_token') || ''
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "接口地址", true);
   xhr.setRequestHeader("course-token", course_token);
   // 设置响应类型为blob
   xhr.responseType = 'blob';
   xhr.send();
   xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) {
       // console.log(xhr);
       // 请求成功，处理响应
       var blob = xhr.response; // 获取Blob对象
       var url = window.URL.createObjectURL(blob); // 创建URL
       var a = document.createElement('a'); // 创建下载链接
       a.href = url;
       a.download = '文件名称.xlsx'; // 设置下载文件名
       document.body.appendChild(a); // 将链接添加到页面中
       a.click(); // 触发下载
       document.body.removeChild(a); // 移除链接
       window.URL.revokeObjectURL(url); // 释放URL资源
     }
   };

 

原文地址：https://blog.csdn.net/weixin_70563937/article/details/143633049

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！