前端导出EXCEL

最新推荐文章于 2024-05-09 19:11:34 发布

FFF-X

最新推荐文章于 2024-05-09 19:11:34 发布

阅读量393

点赞数 9

文章标签：前端 excel

本文链接：https://blog.csdn.net/weixin_66591252/article/details/136302456

版权

步骤解析

定义了一个名为 excelDown 的函数，它接受两个参数：res 和 type。res 是包含响应数据的对象，type 是要导出的文件类型。如果 type 未提供，则默认使用 Excel 文件的 MIME 类型。

export const excelDown = (res, type) => {
 let typ = type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
}

使用 Blob 构造函数创建了一个 Blob 对象。它接受一个包含响应数据的数组和一个配置对象作为参数。配置对象中的 typ 属性指定了 Blob 对象的 MIME 类型，用于指定要创建的文件类型。

  let blob = new Blob([res.data], {
    typ,
  });

从响应的头部中获取文件名。首先，它从 res.headers 对象中获取 content-disposition 头部字段的值，该字段通常包含有关文件的信息。然后，使用正则表达式 RegExp 对象匹配出文件名，并通过 decodeURI 对文件名进行解码，以便处理文件名中的特殊字符。

let contentDisposition = res.headers['content-disposition'];
  let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
  let result = patt.exec(contentDisposition);
  let thename = decodeURI(result[1]);

创建一个 <a> 元素作为下载链接，并为其设置属性。首先，使用 document.createElement 方法创建一个 <a> 元素节点。然后，使用 window.URL.createObjectURL 方法为下载链接生成一个 URL，该 URL 将指向之前创建的 Blob 对象。最后，将生成的 URL 赋值给下载链接的 href 属性。

  let downloadElement = document.createElement('a');
  let href = window.URL.createObjectURL(blob); 
  downloadElement.style.display = 'none';
  downloadElement.href = href;

设置下载链接的 download 属性为文件名，以便在点击下载时使用该文件名。然后，将下载链接添加到文档的 <body> 元素中，并通过调用 click() 方法触发点击事件，从而实现文件的下载。

  downloadElement.download = thename; 
  document.body.appendChild(downloadElement);
  downloadElement.click();

在文件下载完成后进行清理操作。首先，从文档中移除下载链接节点，以便不再显示在页面上。然后，使用 window.URL.revokeObjectURL 方法释放占用的内存资源，以避免内存泄漏。

  document.body.removeChild(downloadElement);
  window.URL.revokeObjectURL(href);

以上就是代码每行的详细解释。它通过创建 Blob 对象和下载链接，实现了将 Excel 文件下载到客户端的功能。

完整代码

export const excelDown = (res, type) => {
  let typ = type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

  let blob = new Blob([res.data], {
    typ,
  });

//从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  let contentDisposition = res.headers[
    'content-disposition'
  ]; 
  let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
  let result = patt.exec(contentDisposition);
  let thename = decodeURI(result[1]); //使用decodeURI对名字进行解码
  //创建下载的链接
  let downloadElement = document.createElement('a');
  let href = window.URL.createObjectURL(blob); 
  downloadElement.style.display = 'none';
  downloadElement.href = href;

  //下载后文件名
  downloadElement.download = thename; 
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载

   //下载完成移除元素
  document.body.removeChild(downloadElement); 
   //释放掉blob对象
  window.URL.revokeObjectURL(href); 
}

FFF-X

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端导出EXCEL

定义了一个名为excelDownres和type。res是包含响应数据的对象，type是要导出的文件类型。如果type未提供，则默认使用 Excel 文件的 MIME 类型。使用Blob构造函数创建了一个 Blob 对象。它接受一个包含响应数据的数组和一个配置对象作为参数。配置对象中的typ属性指定了 Blob 对象的 MIME 类型，用于指定要创建的文件类型。从响应的头部中获取文件名。首先，它从对象中获取头部字段的值，该字段通常包含有关文件的信息。然后，使用正则表达式RegExp对象匹配出文件名，并通过。
复制链接

扫一扫