[{"data":1,"prerenderedAt":134},["ShallowReactive",2],{"content:\u002F2023\u002Fhow-to-download-excel":3,"surround:\u002F2023\u002Fhow-to-download-excel":123},{"id":4,"title":5,"body":6,"categories":93,"date":95,"description":12,"draft":96,"extension":97,"image":98,"meta":99,"navigation":101,"path":102,"permalink":98,"published":98,"readingTime":103,"recommend":98,"references":108,"seo":115,"sitemap":116,"stem":117,"tags":118,"type":121,"updated":98,"__hash__":122},"content\u002Fposts\u002F2023\u002Fhow-to-download-excel.md","如何通过接口下载文件",{"type":7,"value":8,"toc":86},"minimark",[9,13,18,30,40,43,50,53,61,67,71,77,80],[10,11,12],"p",{},"后端通常会以文件流的形式将文件返回给前端，前端需要将获取到的文件内容转换成 blob 类型的数据，然后再下载到本地。",[14,15,17],"h2",{"id":16},"设置-responsetype-为-blob","设置 responseType 为 blob",[10,19,20,21,25,26,29],{},"以 axios 为例，通过设置 ",[22,23,24],"code",{"code":24},"responseType"," 为 ",[22,27,28],{"code":28},"blob"," 把指定响应数据的类型指定为 Blob 对象",[31,32,38],"pre",{"className":33,"code":35,"language":36,"meta":37},[34],"language-ts","export function getFileFromApi() {\n\treturn axios.get({\n\t\turl: `\u002Fxxx`,\n\t\tresponseType: 'blob'\n\t})\n}\n","ts","",[22,39,35],{"__ignoreMap":37},[14,41,42],{"id":42},"获取文件名",[10,44,45,46,49],{},"可以从 ",[22,47,48],{"code":48},"content-disposition"," 响应头中拿到后端返回的文件名，当然也可以前端自定义文件名",[10,51,52],{},"content-disposition 响应头示例",[31,54,59],{"className":55,"code":57,"language":58},[56],"language-text","content-disposition: attachment;filename=\"example.xlsx\"\n","text",[22,60,57],{"__ignoreMap":37},[31,62,65],{"className":63,"code":64,"language":36,"meta":37},[34],"const getFilename = (response: AxiosResponse): string => {\n  let filename = \"\";\n  const contentDisposition = response.headers[\"content-disposition\"];\n  \u002F\u002F 可匹配：\n  \u002F\u002F attachment; filename=\"example.xlsx\"\n  \u002F\u002F attachment; filename=example.xlsx\n  \u002F\u002F attachment; filename*=UTF-8''example.xlsx\n  const fileNameMatch = contentDisposition?.match(\u002Ffilename\\*?=['\"]?(?:UTF-\\d['\"]*)?([^;\\r\\n\"']*)['\"]?;?\u002F);\n  if (fileNameMatch?.length === 2) filename = decodeURIComponent(fileNameMatch[1]);\n  return filename;\n};\n",[22,66,64],{"__ignoreMap":37},[14,68,70],{"id":69},"通过-a-标签下载文件","通过 a 标签下载文件",[31,72,75],{"className":73,"code":74,"language":36,"meta":37},[34],"const downloadBlobFile = (data: BlobPart, fileName: string): void => {\n  const blob = new Blob([data]);\n  const link = document.createElement(\"a\");\n  link.download = fileName;\n  link.style.display = \"none\";\n  link.href = URL.createObjectURL(blob);\n  link.target = \"blank\";\n  document.body.appendChild(link);\n  link.click();\n  URL.revokeObjectURL(link.href); \u002F\u002F 释放 URL 对象\n  document.body.removeChild(link);\n}\n",[22,76,74],{"__ignoreMap":37},[10,78,79],{},"使用方式",[31,81,84],{"className":82,"code":83,"language":36,"meta":37},[34],"getFileFromApi().then(response => {\n  downloadBlobFile(response.data, getFilename(response) || \"example.xlsx\")\n})\n",[22,85,83],{"__ignoreMap":37},{"title":37,"searchDepth":87,"depth":87,"links":88},4,[89,91,92],{"id":16,"depth":90,"text":17},2,{"id":42,"depth":90,"text":42},{"id":69,"depth":90,"text":70},[94],"学习笔记","2023-06-19",false,"md",null,{"comments":96,"slots":100},{},true,"\u002F2023\u002Fhow-to-download-excel",{"text":104,"minutes":105,"time":106,"words":107},"2 min read",1.195,71700,239,[109,112],{"title":110,"link":111},"前端从后端下载或导出文件的方法","https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6911964673331953671",{"title":113,"link":114},"前端实现文件下载的所有方式","https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7036662085522030628",{"title":5,"description":12},{"loc":102},"posts\u002F2023\u002Fhow-to-download-excel",[119,120],"文件下载","Blob","tech","yGRBacrfUXXc4qc_APrBkCxWfHhgcP4bFuLrmH0c1r0",[124,129],{"title":125,"path":126,"stem":127,"date":128,"type":121,"children":-1},"Vue 中的特殊变量 $event","\u002F2023\u002Fvue\u002Fvue3-event","posts\u002F2023\u002Fvue\u002Fvue3-event","2023-06-16",{"title":130,"path":131,"stem":132,"date":133,"type":121,"children":-1},"CSS 垂直居中的几种方式","\u002F2023\u002Fcss\u002Fvertical-centering-method","posts\u002F2023\u002Fcss\u002Fvertical-centering-method","2023-06-27",1793699837886]