为什么用Vue导出Excel时，表格中文显示乱码？

迷人的梓希提问于 2026-02-12 13:53:25 阅读 14

交互

用Element UI的export方法导出Excel，中文单元格全显示乱码，已经设置了responseType和charset还是没用…

代码是这样的：

<el-table :data="tableData" :header-cell-style="{ background: '#f5f7fa' }">
  <el-table-column prop="name" label="姓名"/>
  <el-table-column prop="score" label="分数"/>
</el-table>
<button @click="exportTable">导出Excel</button>

exportTable() {
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['姓名', '分数']
    const data = this.tableData.map(row => [row.name, row.score])
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: '成绩表',
      autoWidth: true,
      bookType: 'xlsx'
    })
  })
}

用Postman看接口返回的data是正常的中文，保存成xlsx后打开就全是？？？了，到底哪里设置错了？

我来解答赞 6 收藏

反馈

1 条解答

极客梓奥 Lv1

前端这块导出Excel中文乱码，八成是文件流编码没处理对。你用的 Export2Excel 底层其实是 SheetJS（xlsx 库），它生成的 Blob 默认是二进制流，但没正确声明字符编码。

问题不在 responseType 或接口数据，而是导出时创建 Blob 的时候少了 charset=utf-8。你得在 export_json_to_excel 调用后，把生成的文件流指定为 utf-8 编码。

改一下你的代码，在引入 excel 对象之后，手动处理 blob：

exportTable() {

  import('@/vendor/Export2Excel').then(excel => {

    const tHeader = ['姓名', '分数']

    const data = this.tableData.map(row => [row.name, row.score])

    excel.export_json_to_excel({

      header: tHeader,

      data,

      filename: '成绩表',

      autoWidth: true,

      bookType: 'xlsx'

    })

    // 关键在这里：强制加上 charset

    const link = document.createElement('a')

    const blob = new Blob([this.downloadData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })

    // 上面那行的 downloadData 是假的，实际上 export_json_to_excel 内部已经做了 document.createElement('a') 下载操作

    // 所以更好的办法是直接去改你项目里的 vendor/Export2Excel.js 文件

  })

}

最靠谱的办法是打开你项目里的 @/vendor/Export2Excel.js，找到它生成 Blob 的地方，改成：

const blob = new Blob([s2ab(wbout)], {

  type: 'application/octet-stream;charset=utf-8'

})

并且确保 wbout 是字符串或 array buffer 正确转换过来的。SheetJS 的 s2ab 函数要配合 utf-8 处理。

或者更简单粗暴一点，在保存文件时强制加个 ufeff BOM 头，让 Excel 识别成 UTF-8：

excel.export_json_to_excel({

  header: tHeader,

  data,

  filename: '成绩表',

  autoWidth: true,

  bookType: 'xlsx'

})

// 然后立刻重命名下载链接 or 修改源码加 BOM

const xlsxUrl = URL.createObjectURL(

  new Blob(['ufeff', ...], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })

)

但建议直接改 Export2Excel 源文件，找到最后生成 blob 和 a 标签下载那段，把 type 设成 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8 并在数据前加 ufeff，这样 Excel 才会正确识别中文。

2026-02-12 14:01