用 sheetJS 匯出 excel

Hi 大家好! 近期確診,不適的症狀蠻嚴重的,深刻感受到健康的重要!
這篇文章會帶大家看如何透過 sheetJS 將資料匯出成 excel 格式。

# sheetJS 解決了哪些問題 ?

透過下方的程式碼得知,sheetJS 讓我們可以用簡潔的程式碼匯出 excel。

<script setup>
import { utils, writeFileXLSX } from 'xlsx'
import { reactive, watch } from '@vue/composition-api'

const xlsx = reactive({
sheets: [...your data]
})

function onExport() {
/* make the worksheet */
const fieldsWS = utils.json_to_sheet(xlsx.sheets)
/* add to workbook */
const wb = utils.book_new()
utils.book_append_sheet(wb, fieldsWS, 'sheets')
/* generate an XLSX file */
writeFileXLSX(wb, 'sheets.xlsx')
}
</script>

<template>
<v-btn color="primary" @click="onExport">匯出 excel</v-btn>
</template>

並且在許多平台上都可以正常匯出,下方是 SAUCE LABS 列出的支援度。


圖片來源: saucelabs

#source code 來觀察 sheetJS 背後的實作

function onExport() {
/* make the worksheet */
const fieldsWS = utils.json_to_sheet(xlsx.sheets)
/* add to workbook */
const wb = utils.book_new()
utils.book_append_sheet(wb, fieldsWS, 'sheets')
/* generate an XLSX file */
writeFileXLSX(wb, 'sheets.xlsx')
}

下方是來自 mdn 的介紹

The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer.
you create a typed array view or a DataView which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

固定大小的原始二進制資料緩衝,讓存取資料更有效率。
透過閱讀原始碼,認識到了平常沒有機會接觸到的資料型態!

# 小結

實作的過程,蠻快速的。比較大的收穫是在閱讀原始碼的過程,整體來說非常有趣!
在閱讀文章時如果有遇到什麼問題,或是有什麼建議,都歡迎留言告訴我,謝謝。😃

# 參考資料


關於作者

喜歡有趣的設計

分享文章