前端对excel的相关处理转换

最近做了几个Excel相关的处理和转换，记录一下

1.前端将表格数据转化为excel文件

(1)先安装js-export-excel插件
npm install js-export-excel --save
(2)引入js-export-excel
import ExportJsonExcel from 'js-export-excel';
(3)开始使用
const tableData = fselectedRows || []; // 所勾选表格的json数据
const option = {};
const excelTable = [];
if (tableData?.length > 0) {
    if (tableData) {
    tableData?.forEach((item: any)=>{
    const obj = {
                '姓名': item?.name,
                '年级': item?.grade,
                '年龄': item?.age,
                '住址'item?.address:              
            }
    excelTable.push(obj);
    })
    }
}
option.fileName = '学校学生统计数据'
option.datas = [
    {
        sheetData: excelTable ,
        sheetName: 'sheet',
        sheetFilter: ['姓名','年级','年龄','住址'],
        sheetHeader: ['姓名','年级','年龄','住址'],
    }
];
const toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();

2.前端将table展示的数据转化为压缩包

(1)安装jszip插件
npm install jszip --save
(2)引入JSZip 插件
import JSZip from 'jszip';
(3)开始使用
import { Button} from 'antd';
const Index = () => {
  // 将workbook装化成blob对象
  const workbook2blob = workbook => {
    // 生成excel的配置项
    const wopts = {
      // 要生成的文件类型
      bookType: 'xlsx',
      // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      bookSST: false,
      type: 'binary'
    };
    const wbout = XLSX.write(workbook, wopts);
    // 将字符串转ArrayBuffer
    function s2ab(s) {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      // eslint-disable-next-line no-bitwise
      for (let i = 0; i < s.length; i += 1) view[i] = s.charCodeAt(i) & 0xff;
      return buf;
    }
    const blob = new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    });
    return blob;
  }

  // 将blob对象创建blob url，然后用a标签实现弹出下载框
  const openDownloadDialog = (blob, fileName) => {
    if (typeof blob === 'object' && blob instanceof Blob) {
      blob = URL.createObjectURL(blob); // 创建blob地址
    }
    const aLink = document.createElement('a');
    aLink.href = blob;
    // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
    aLink.download = fileName || '';
    let event;
    if (window.MouseEvent) event = new MouseEvent('click');
    // 移动端
    else {
      event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
  }

  // demo数据
  const sheet1data = [{ department: '行政部', count: 2 }, { department: '前端部', count: 2 }];
  const sheet2data = [{ name: '张三', do: '整理文件' }, { name: '李四', do: '打印' }];
  const sheet3data = [{ name: '张大人', do: 'vue' }, { name: '李大人', do: 'react' }];
  const sheet1 = XLSX.utils.json_to_sheet(sheet1data);
  const sheet2 = XLSX.utils.json_to_sheet(sheet2data);
  const sheet3 = XLSX.utils.json_to_sheet(sheet3data);

  // 创建workbook
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, sheet1, '部门统计');
  XLSX.utils.book_append_sheet(wb, sheet2, '行政部');
  XLSX.utils.book_append_sheet(wb, sheet3, '前端部');
  const workbookBlob = workbook2blob(wb);

  // 生成zip文件
  const generateZip = () => {
    const zip = new JSZip();
    // 传入文件名 和 blob数据，为压缩包添加内部文件
    zip.file('这是纯前端将json转成Excel文件.xlsx', workbookBlob);
    zip.generateAsync({ type: 'blob' })
    .then(content => {
      // 传入blob数据和文件名 并下载为本地文件
      openDownloadDialog(content, '这是纯前端生成压缩文件.zip');
    });
  }

  return (
    <div onClick={generateZip}>
    <Button>纯前端将json数据转成Excel文件再打包成zip文件下载</Button>
    </div>
  )
}

export default Index;