這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

在前端開發中，有時候一些業務場景中，我們有需求要去實現excel的預覽和列印功能，本文在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指令進行綁定區域列印。

本文轉載於:

https://juejin.cn/post/7292975471448670248

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。