步骤解析
定义了一个名为 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);
}