LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】前端纯js如何实现excel带样式在线预览?

admin
2023年5月26日 17:14 本文热度 990

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


再看看预览后的:

@vue-office/excel预览效果


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

实现原理

需要借助两个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的样式:


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


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


目前支持以下格式:

  • 内容:字体font、颜色Color、大小fontSize、加粗等

  • 边框:边框粗细和颜色

  • 填充色

  • 对齐方式:左右、上下

  • 合并单元格

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

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



该文章在 2023/5/26 17:23:59 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved