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

Question

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

使用 VueJs 和 Quasar Framework 创建的原始表：

生成的 .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')

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

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

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

标签： vue.jsquasar-frameworkfilesaver.js

Answer 1

经过几天寻找答案，我设法解决了我的问题。更准确地说，只需使用{raw: true}. 通过这样做，lib 不再格式化数据，而是将其保留为来自 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

这个链接帮助了我