将来自 html table 的数据格式化为 filesaver.js 中的 xlsx 文件的问题 - VueJs

Question

我正在使用 Filesaver.js 库从我拥有的 table 中导出 .xlsx 文件。但是我收到了一些错误。见下文：

使用带有 Quasar 框架的 VueJs 创建的原始 table：

生成的 .xlsx 文件：

另一种情况

生成的 .xlsx 文件：

我的代码：

exportTable() {
    let wb = XLSX.utils.table_to_book(document.querySelector('.q-table'), {
      sheet: "Sheet JS",
    })
    let wbout = XLSX.write(wb, {
      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
    }

    saveAs(new Blob([s2ab(wbout)], {
      type: "text/plain;charset=utf-8"
    }), 'test.xlsx')

为什么导出电子表格时 table 中的字符格式没有保留？

我的电子表格数据没有被视为字符串吗？

我是巴西人。抱歉英语不好(=

Answer 1

经过几天的寻找答案，我设法解决了我的问题。更准确地说，只需使用 {raw: true}。通过这样做，库不再格式化数据，将其保留为来自 HTML 的原始格式。有趣的是，我没有在文档中找到这个。

// import something here
import Vue from 'vue'
import XLSX from 'xlsx'
import {
  saveAs
} from 'file-saver'


// Global Function

const exportExcel = (table) => {

  let wb = XLSX.utils.table_to_book(table, {
    sheet: "Sheet JS",
    raw: true // Here
  })
  let wbout = XLSX.write(wb, {
    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
  }

  saveAs(new Blob([s2ab(wbout)], {
    type: "text/plain;charset=utf-8"
  }), 'spreadsheet.xlsx')
}

Vue.prototype.$exportExcel = exportExcel;

// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
//export default exportExcel

This link helped me

将来自 html table 的数据格式化为 filesaver.js 中的 xlsx 文件的问题 - VueJs

Problems with formatting data coming from the html table to the xlsx file in filesaver.js - VueJs

vue.js

quasar-framework

filesaver.js