前端js如何实现excel文件(.xlsx)带样式预览？

excel的预览库有不少，也都很强大，但是能很简单实现 【带样式预览】 的很少，我是通过借助exceljs和x-data-spreadsheet两个库，来实现了excel带样式预览的vue组件@vue-office/excel，本文先介绍用法，然后再介绍实现原理。

使用用法

安装@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原始文件

再看看预览后的

​

编辑切换为居中

@vue-office/excel预览效果

基本上还算一致，但是还有一些细节需要处理，整体上算是还原了excel的样式。

查看demo演示

github源码

实现原理

需要借助两个excel相关库

exceljs：用来读取excel文件，读取的文件中包含excel文件的样式，但是这个样式不能直接渲染到浏览器中。

x-data-spreadsheet：excel在线编辑软件，支持带样式预览，但是必须满足自己特有的数据格式。

通过将exceljs获取的workbook对象转为x-data-spreadsheet所需的数据格式，就可以借助x-data-spreadsheet的预览功能，实现excel带样式预览。

​

编辑切换为居中

@vue-office/excel实现原理

通过exceljs读取的数据格式大致如下，一个workbook包含多个sheet，一个sheet包含多个行row，一个rou包含多个单元格cell，单元格cell中包含excel的样式

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

但是这里的样式是不能直接用于展示的，比如这个fgColor，并不是给出一个色值，只是给出了theme和tint，我是通过实验猜测出这两个值的含义，一个是excel的颜色主题，如下图，tint是加深dark或者减淡light。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

然后通过将这些样式转换成具体色值，实现预览，具体比较繁琐，知道大致思路，然后看下x-data-spreadsheet所需格式即可知道要如何进行转换。

目前支持以下格式：

• 内容：字体font、颜色Color、大小fontSize、加粗等
• 边框：边框粗细和颜色
• 填充色
• 对齐方式：左右、上下
• 合并单元格

整个实现过程技术上并不难，但是很繁琐，还缺少资料，需要自己去试验猜测，还需要后续抽时间继续完善，感兴趣的可以看看我的源码。

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

github源码