在 vue 项目中使用 blob 和 FileSaver.js 下载 excel(.xlsx) 已损坏

Posted

技术标签:

【中文标题】在 vue 项目中使用 blob 和 FileSaver.js 下载 excel(.xlsx) 已损坏【英文标题】:Downloading excel(.xlsx) with blob and FileSaver.js in vue project getting coruppted 【发布时间】:2018-01-10 06:35:34 【问题描述】:

我正在尝试通过在我的 Vue 项目中发送 Api 请求来下载文件,并且我正在尝试使用 blob 和 FileSaver.js 保存文件

sendAjaxCall.then(response => 
      let file = new Blob([response.data], type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
      FileSaver.saveAs(file, 'Export2.xlsx')

但我无法打开文件,它已损坏。

【问题讨论】:

你还有这个问题吗? 【参考方案1】:

试试这个

     return Vue.axios.get(`api/excel_sheet`, 
        responseType: 'blob',
      ).then(response => 
      FileSaver.saveAs(response.data, 'Export2.xlsx')
;

你需要将响应类型指定为blob

【讨论】:

谢谢 Mazino,实际上我错过了 responseType,您的解决方案有效。而且我已经通过发送 responseType = 'arraybuffer' 和 blob 响应来解决它,然后保存它。 谢谢@MazinoSUkah .. 它就像一个魅力.. :)

以上是关于在 vue 项目中使用 blob 和 FileSaver.js 下载 excel(.xlsx) 已损坏的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中如何把表格导出excel表格

Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理

在vue项目中使用monaco-editor

Vue.js使用Blob的方式实现excel表格的下载(流文件下载)

Vue通过Blob对象实现导出Excel功能

Vue 中使用Ajax请求