VueJs结合Quasar使用filesaver.js导出HTML表格到xlsx的格式问题

问题原因 #

• 核心问题：Quasar 的 q-table 组件默认渲染的 DOM 结构不是标准的 <table>/<tr>/<td> 原生表格结构，多数场景下会用 <div> 实现布局，而 SheetJS 的 table_to_book 方法仅支持识别原生标准表格的 DOM 结构，因此会出现内容读取错位、格式丢失的问题。
• 配置错误：你当前导出时的 Blob MIME 类型配置错误，.xlsx 文件对应的标准 MIME 类型不是 text/plain，错误的编码声明会进一步导致特殊字符、格式解析异常。
• 场景适配问题：如果你的表格使用了插槽自定义渲染内容（比如格式化数字、货币、特殊符号），直接读取 DOM 的方式也会丢失格式化后的内容，甚至出现无法正确识别为字符串的问题，和你的猜测吻合。

修复方案 #

方案1：从源数据生成工作簿（最稳定，推荐） #

不要直接读取 DOM 结构，使用你绑定到 q-table 的原始数据源生成 xlsx，示例代码如下：

exportTable() {
  // 此处的 tableData 替换为你绑定给 q-table 的 data 属性的数组变量
  const worksheet = XLSX.utils.json_to_sheet(this.tableData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet JS");
  
  const wbout = XLSX.write(workbook, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'binary'
  })

  function s2ab(s) {
    let buf = new ArrayBuffer(s.length)
    let view = new Uint8Array(buf)
    for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF
    return buf
  }
  // 修正为xlsx对应的标准MIME类型
  saveAs(new Blob([s2ab(wbout)], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  }), 'test.xlsx')
}

方案2：强制q-table渲染原生标准表格 #

如果一定要使用读取 DOM 的方式导出，可以给 q-table 添加 flat 属性，同时关闭虚拟滚动、分页、懒加载等特性，让组件渲染原生的 <table> 结构，再配合修正上述的 MIME 类型配置即可。

特殊字符兼容说明 #

你用到的葡萄牙语特殊字符不需要额外做编码处理，采用上述修复方案后，SheetJS 会自动适配 UTF-8 编码的字符，不会出现乱码问题。

内容的提问来源于stack exchange，提问作者Gato de Schrödinger