x-spreadsheet带样式的导入和导出

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在实现网页可以编辑excel表格时，选用了x-spreadsheet这个插件，结合xlsx实现导入和导出时，发现是没有带样式的，包括行高/列宽/背景颜色等，当表头字段和单元格有多行数据时，页面表格不适应宽高是不合理的，因此研究下样式问题如何优化本示例使用 vue + xlsx + x-spreadsheet

---

一、X-Spreadsheet

X-Spreadsheet 是一个基于 Web 的 JS 在线表格
中文文档：https://hondrytravis.com/x-spreadsheet-doc/

二、导入和导出

导入：将本地excel数据 转为 x-spreadsheet支持的格式数据
导出：将x-spreadsheet格式数据 转为 excel能识别的格式

1. 导入

import * as xlsx from "xlsx"
// 导入
const handleFileChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
   
  const file = uploadFile as UploadRawFile; // 获取用户选择的文件
  const reader = new FileReader();// 使用FileReader读取文件内容为ArrayBuffer
  reader.onload = async (e) => {
   
    const ab = e.target.result; // 获取ArrayBuffer
    
    重点是这里的处理(stox是x-spreadsheet的导入函数)
    (xlsx.read是读取Excel, 其中cellStyles：true一定要设置，才能将样式保存在单元格的s字段)
    返回WordBook对象(具体数据格式可以打印出来查看)
  
    const WordBook = stox(xlsx.read(ab,{
   type:'array',cellStyles:true}));
    grid.value.loadData(WordBook); // 加载数据到当前表格
  };

  reader.readAsArrayBuffer(file.raw); // 读取文件内容
};

其中stox代码（样式处理分别在1234位置）：

export function stox(wb) {
   
  var out = [];
  wb.SheetNames.forEach(function (name) {
   
    var o = {
    name: name, rows: {
   }, styles: []  };
    var ws = wb.Sheets[name];
    if(!ws || !ws["!ref"]) return;
    var range = XLSX.utils.decode_range(ws['!ref']);
    // sheet_to_json will lost empty row and col at begin as default
    range.s = {
    r: 0, c: 0 };
    var aoa = XLSX.utils.sheet_to_json(ws, {
   
      raw: false,
      header: 1,
      range: range
    });

    aoa.forEach(function (r, i) {
   
      var cells = {
   };
      r.forEach(function (c, j) {
   
        cells[j] = {
    text: c };

        var cellRef = XLSX.utils.encode_cell