【React】前端导出Excel，导出xml文件

最近有个需求，需要从前端导出Excel文件与xml文件

知识点 Blob ArrayBuffer

Excel导出

npm包及文档：xlsx，file-saver

demo

写成工具：exportExcel.js

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

const object = 'DATA_OBJECT';
const array = 'DATA_ARRAY';

const s2ab = (s) => {
  if (s.length > 0) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }
  return new ArrayBuffer();
};

const appendSheet = (appendData) => {
  const wookSheet = XLSX.utils.aoa_to_sheet(appendData.excelData);
  XLSX.utils.book_append_sheet(appendData.wookBook, wookSheet, `${appendData.sheetName}`);
};

const loopData = (wookBook, data, type) => {
  data.forEach((item, index) => {
    const sheetName = item.sheetName || `sheet${index + 1}`;
    if (item.sheetData && Array.isArray(item.sheetData)) {
      const appendData = {
        wookBook,
        sheetName: `${sheetName}`,
      };
      type === 'DATA_ARRAY' ? appendData.excelData = item.sheetData
        : appendData.excelData = analysisObj(item.sheetData);
      appendSheet(appendData);
    }
  });
};

const analysisObj = (sheetData) => {
  const excelData = [];
  const header = [];
  const content = [];
  sheetData.forEach((item, index) => {
    for (const key in item) {
      if (key !== undefined) {
        if (index === 0) {
          header.push(key);
          content.push(item[key]);
        } else {
          content.push(item[key]);
        }
      }
    }
    excelData.push(content);
    content.splice(0, content.length);
  });
  excelData.unshift(header);
  header.splice(0, header.length);
  return excelData;
};

const exportExcel = (data) => {
  const fileName = data.fileName || 'excel';
  const fileType = data.fileType || 'xlsx';
  const wopts = {
    bookType: `${fileType}`,
    type: 'binary',
  };
  const wookBook = XLSX.utils.book_new();

  if (data && data.dataArray && Array.isArray(data.dataArray)) {
    loopData(wookBook, data.dataArray, array);
  } else if (data && data.dataObj && Array.isArray(data.dataObj)) {
    loopData(wookBook, data.dataObj, object);
  }
  const wbout = XLSX.write(wookBook, wopts);
  FileSaver.saveAs(new Blob([s2ab(wbout)]), `${fileName}.${fileType}`);
};

export default exportExcel;

调用

import exportExcel from './exportExcel';

const sheetData =[['col1','col2'],[1,2]];

exportExcel({
  fileName: '数据报表',
  dataArray: [{ sheetData }],
});

XML导出

npm包及文档：xmlbuilder，file-saver

demo

 const xmlbuilder = require('xmlbuilder');
 const FileSaver = require('file-saver');
 const xmlObj = {
   root:{
     name: { '#cdata': '前端导出xml' },
     id: 1,
   },
 };
 const xml = xmlbuilder.create(xmlObj, { encoding: 'utf-8' }).end({ pretty: true });
 const blob = new Blob([xml], { type: 'text/xml;charset=utf-8' });
 FileSaver.saveAs(blob, `${fileName}.xml`);