vue 预览excel文件的又一伟大实践 —— vue-office

实际上,预览excel这个功能,我之前已经写过一个文章了。如下,使用的是 luckysheet/luckyExcel 实现的。

vue 实现在线预览Excel-LuckyExcel/LuckySheet实现方案_excel在线预览的方案-CSDN博客

但是最近客户使用发现一个bug,就是某几个单元格没有对齐。这种偶发性的故障着实不好排查。因为不知道是哪里的问题,所以你也不能修改显示的数据和单元格。

所以,我就另起炉灶了。

经过github一顿猛搜,找到了又一解决方案------vue-office。(因为github网速不给力,我给出gitee的仓库地址)。

vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合,提供一站式office文件预览方案,支持vue2和3

进入实操模式。

第一,安装

bash 复制代码
//excel文档预览组件
npm install @vue-office/excel vue-demi

一顿操作猛如虎,npm run dev 走起,咔咔直接报错。因为公司项目问题,我用的vue版本还是2.6.所以直接报出这个错误:

bash 复制代码
@vue/composition-api/dist/vue-composition-api.mjs in ./node_modules/vue-demi/lib/index.mjs

not found

没找到这个包,我也很听劝。那就继续安装:

bash 复制代码
npm i --save @vue/composition-api@1.3.0

在npm run dev,没问题了。

第二,请求数据,开始渲染

javascript 复制代码
// 下边是伪代码  千万不要直接复制


// 渲染组件
<template>
  <vue-office-excel :src="excel" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

// 引入接口

import getExcelData from '..........'

export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    },


       /**
        在这里开始请求数据
      */

       fetchExcelData () {
            getExcelData ().then(res => {
                this.excel= res
            })

       },



        /******* getExcelData 注意 

            这个接口的responseType要设置为'arraybuffer',不设置可以渲染不出来

    
        ********/




  }
}
</script>

一般的需求到此就结束了。不出意外的话,就可以预览Excel了。是不是很简单呢?

第三,自定义样式

但是,如果你发现你的样式有一些不尽人意,那么就需要一些高阶用法了。

可是,这官方文档|
xlsx文件预览 | vue-office

对于自定义样式,可是只字不提啊。你说怎么办?看源码呗。

蒙蔽看源码的过程省略一万字。

在源码中找到这几个关键的东西:

幸运的是,他是基于 X-Spreadsheet

不幸的是,他并没有使用 X-Spreadsheet styles的配置项目。

这一下,真的是头皮发麻啊。

在回归官方文档,仔细看看,发现了这个hook

行吧,打印出来看看这些数据吧。

javascript 复制代码
"transformData": function (workbookData){
      console.log(workbookData);
      return workbookData;    
  }

再次展开 rows的cell,发现

style里边竟然是数字,这是什么鬼。联想一下下边的styles数组。大胆猜测下,这估计就是引用styles数组的索引值吧。

再看styles数组

果然这里边啥都有,那么根据vue-office的源码开始整吧。

javascript 复制代码
transformData: (workbookData) => {
          
          workbookData[0].styles = workbookData[0].styles.map(item => {

            // 修改文字大小
            item.font.size = 18;

            // 颜色
            item.color = '#888'
            
            // 修改背景颜色
            item.bgColor = '#f40';

            // 修改border

            item.border = {

                top: ['thin', '#fff']
            }


            .......

            

}

然后,下班吧,肉都凉了。

相关推荐
懵逼的小黑子20 小时前
excel里面店铺这一列的数据结构是2C【uniteasone17】这种,我想只保留前面的2C部分,后面的【uniteasone17】不要
excel
偷心伊普西隆1 天前
Python EXCEL 理论探究:格式转换时处理缺失值方法
python·excel
CodeCraft Studio2 天前
Excel处理控件Aspose.Cells教程:使用 Python 将 Pandas DataFrame 转换为 Excel
python·json·excel·pandas·csv·aspose·dataframe
星空的资源小屋2 天前
PPTist,一个完全免费的 AI 生成 PPT 在线网站
人工智能·python·电脑·excel
开开心心_Every2 天前
免费语音合成工具:66种音色随心选
人工智能·面试·java-ee·计算机外设·电脑·maven·excel
偷心伊普西隆3 天前
EXCEL VBA 清空Excel工作表(Sheet)的方法
microsoft·excel
Coding_Doggy3 天前
苍穹外卖Day12 | Apache POI、导出Excel报表、HttpServletResponse、工作台
excel
l1t4 天前
张泽鹏先生手搓的纯ANSI处理UTF-8与美团龙猫调用expat库读取Excel xml对比测试
xml·人工智能·excel·utf8·expat
Source.Liu4 天前
【Python自动化】 21 Pandas Excel 操作完整指南
python·excel·pandas
会飞的小菠菜4 天前
如何根据Excel数据表生成多个合同、工作证、录取通知书等word文件?
word·excel·模板·数据表·生成文件