Vue解决导出生成excel文件乱码问题

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

this.$http({
  url: this.$http.adornUrl('/station/prod/skuExport'),
  method: 'get',
  params: {},
  responseType: 'blob' // 解决文件下载时出现的乱码问题
}).then(({ data }) => {
  var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
  const fileName = '导出.xlsx'
  const elink = document.createElement('a')

  if ('download' in elink) {
    // 非IE浏览器的下载处理方式
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放已创建的URL对象
    document.body.removeChild(elink)
  } else {
    // 兼容IE10及以上版本的下载逻辑
    navigator.msSaveBlob(blob, fileName)
  }
})

以上代码实现了通过前端调用接口并触发文件下载的功能，适用于导出Excel等场景。使用了Blob和URL对象来处理二进制流数据，同时兼容主流浏览器与IE10+环境。

核心要点包括设置正确的responseType以避免乱码、动态创建a标签实现下载行为，并在操作完成后清理DOM元素和内存引用，确保页面性能不受影响。对于不支持原生download属性的浏览器，则采用msSaveBlob这一特定API进行降级处理。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：EXCEL xcel exce cel Vue