Vue3實現excel檔案預覽和列印

預覽excel

關於實現excel文件線上預覽的做法，一種方式是透過講文件裡的資料處理成html，一種是將文件處理成圖片進行預覽。

首先我們先講一下實現html這種方式預覽的。Excel預覽用的是xlsx這個庫。

xlsx

xlsx是一個優秀的表格處理庫，是一款適用於瀏覽器和nodejs的開源電子表格解析庫"

安裝

這裡值得注意的是，vue2和vue3的引用寫法不一樣

// vue2 引用 xlsx
import xlsx from 'xlsx'
// vue3 引用 xlsx
import * as XLSX from 'xlsx'

使用

「FileReader讀取檔案流」

先使用FileReader物件提供的一種讀取File物件內容的方法，將檔案流用readAsBinaryString方法根據二進位制字串的形式返回，再透過reader.onload操作讀取檔案流的二進位制字串形式：

使用案例

// 例項化 FileReader 物件
const reader = new FileReader()
// file為檔案流
reader.readAsBinaryString(file)

reader.onload = function () {
    const binaryStringData = reader.result
    console.log(binaryStringData)
}

程式碼

「vue3上傳excel並線上預覽」

那麼vue3中如何預覽Excel檔案呢，這裡現用一個ant-design-vue的上傳元件上傳一個excel檔案，如下:

(1)建立元件
新增ant-design-vue upload上傳元件，用於上傳檔案用來預覽excel並轉化其為html的元件。包含一個檔案上傳的按鈕和預覽區域，如下圖：

使用XLSX.utils.sheet_to_html方法將工作表(workSheet)轉化成html表格的字串表示，然後顯示在前端頁面，按照表格的行列結構進行排序，從而實現線上預覽的效果， 如下：

這裡值得注意的是新增table的樣式:

效果

---

列印excel

安裝

yarn add vue3-print-nb

使用

我們使用vue3-print-nb列印excel表格，在點選列印按鈕時觸發列印事件。

❝

問: 如何使用vue3-print-nb庫列印

答: 使用v-print指令

❞

vue3全域性引入print

import { createApp } from 'vue'
import App from './App.vue'

import print from 'vue3-print-nb'

const app = createApp(App)
app.use(print).mount('#app')

程式碼

這種列印情況，除非是整頁window.print()列印，列印單個表格的話，我們上傳完excel表，把資料渲染到表格中再進行列印，像這樣:

XLSX.utils.sheet_to_json用於將excel表格中的工作表(sheet)轉換成JSON格式的函式.

這裡我們透過轉換出來的json賦值給table，如下:

template

script

效果

總結

「excel檔案預覽」，借用了xlsx庫來讀取excel檔案流，透過XLSX.utils.sheet_to_html來實現線上檔案的預覽。

「eccel檔案列印」，借用了vue3-print-nb庫來進行使用者點選列印按鈕時，列印某個區域範圍的內容，透過XLSX.utils.sheet_to_json解析檔案流轉化成JSON資料，再透過v-print指令進行繫結區域列印。