前端json数据 转换成zip压缩包下载

Posted 2021-08-24 哈娄

思路：分两步，第一步将数据转成excel, 第二部将excel压缩 通过a标签完成下载。

代码

import * as React from 'react';
import styles from './index.module.scss';
import JSZip from 'jszip';
import XLSX from 'xlsx';

const Guide = () => {
  // 将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: '部门1', count: 2 },
    { department: '部门2', count: 2 },
  ];
  const sheet2data = [
    { name: '人1', do: 'xx1' },
    { name: '人2', do: 'xx2' },
  ];
  const sheet3data = [
    { name: '人3', do: 'xx3' },
    { name: '人4', do: 'xx4' },
  ];
  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, '部门1');
  XLSX.utils.book_append_sheet(wb, sheet3, '部门2');
  const workbookBlob = workbook2blob(wb);

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

  return (
    <div onClick={downLoadZip}>
      json转成zip下载包
    </div>
  );
};

export default Guide;