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

进入实操模式。

第一，安装

//excel 文档预览组件
npm install @vue-office/excel vue-demi

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

@vue/composition-api/dist/vue-composition-api.mjs in ./node_modules/vue-demi/lib/index.mjs

not found

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

npm i --save @vue/composition-api@1.3.0

在 npm run dev，没问题了。

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

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


// 渲染组件

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

第三，自定义样式

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

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

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

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

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

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

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

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

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

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

"transformData": function (workbookData){console.log(workbookData);
      return workbookData;    
  }

再次展开 rows 的 cell，发现

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

再看 styles 数组

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

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']
            }


            .......

            

}

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