excel的預(yù)覽庫有不少，也都很強(qiáng)大，但是能很簡單實現(xiàn)【帶樣式預(yù)覽】的很少，我是通過借助exceljs和x-data-spreadsheet兩個庫，來實現(xiàn)了excel帶樣式預(yù)覽的vue組件@vue-office/excel，本文先介紹用法，然后再介紹實現(xiàn)原理。

免費開源下載：https://github.com/501351981/vue-office

在線效果預(yù)覽：https://501351981.github.io/vue-office/examples/dist/#/docx

使用用法

安裝@vue-office/excel

npm install @vue-office/excel vue-demi

使用方法

只需傳遞要預(yù)覽的文件src地址，即可完成預(yù)覽，可以說是目前最簡單的預(yù)覽方式了。

src支持三種格式：

• string： Excel文件的網(wǎng)絡(luò)地址，如cdn地址

• ArrayBuffer：以ArrayBuffer格式讀取Excel文件的內(nèi)容

• Blob：以Blob格式讀取Excel文件的內(nèi)容

<template>
  <vue-office-excel :src="excel" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'
export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

看看預(yù)覽效果

首先看下excel內(nèi)容：

再看看預(yù)覽后的：

基本上還算一致，但是還有一些細(xì)節(jié)需要處理，整體上算是還原了excel的樣式。

實現(xiàn)原理

需要借助兩個excel相關(guān)庫

exceljs：用來讀取excel文件，讀取的文件中包含excel文件的樣式，但是這個樣式不能直接渲染到瀏覽器中。

x-data-spreadsheet：excel在線編輯軟件，支持帶樣式預(yù)覽，但是必須滿足自己特有的數(shù)據(jù)格式。

通過將exceljs獲取的workbook對象轉(zhuǎn)為x-data-spreadsheet所需的數(shù)據(jù)格式，就可以借助x-data-spreadsheet的預(yù)覽功能，實現(xiàn)excel帶樣式預(yù)覽。

通過exceljs讀取的數(shù)據(jù)格式大致如下，一個workbook包含多個sheet，一個sheet包含多個行row，一個rou包含多個單元格cell，單元格cell中包含excel的樣式：

但是這里的樣式是不能直接用于展示的，比如這個fgColor，并不是給出一個色值，只是給出了theme和tint，我是通過實驗猜測出這兩個值的含義，一個是excel的顏色主題，如下圖，tint是加深dark或者減淡light。

然后通過將這些樣式轉(zhuǎn)換成具體色值，實現(xiàn)預(yù)覽，具體比較繁瑣，知道大致思路，然后看下x-data-spreadsheet所需格式即可知道要如何進(jìn)行轉(zhuǎn)換。

目前支持以下格式：

• 內(nèi)容：字體font、顏色Color、大小fontSize、加粗等

• 邊框：邊框粗細(xì)和顏色

• 填充色

• 對齊方式：左右、上下

• 合并單元格

整個實現(xiàn)過程技術(shù)上并不難，但是很繁瑣，還缺少資料，需要自己去試驗猜測，還需要后續(xù)抽時間繼續(xù)完善，感興趣的可以看看我的源碼。

最大的感受就是做一個好的開源作品，真不容易，希望大家支持一下~~