狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

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

使用用法

安裝@vue-office/excel

npm install @vue-office/excel vue-demi

使用方法

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

src支持三種格式：

• string： Excel文件的網絡地址，如cdn地址

• ArrayBuffer：以ArrayBuffer格式讀取Excel文件的內容

• Blob：以Blob格式讀取Excel文件的內容

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

看看預覽效果

首先看下excel內容：

再看看預覽后的：

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

實現原理

需要借助兩個excel相關庫

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

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

通過將exceljs獲取的workbook對象轉為x-data-spreadsheet所需的數據格式，就可以借助x-data-spreadsheet的預覽功能，實現excel帶樣式預覽。

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

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

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

目前支持以下格式：

• 內容：字體font、顏色Color、大小fontSize、加粗等

• 邊框：邊框粗細和顏色

• 填充色

• 對齊方式：左右、上下

• 合并單元格

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

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