一、安装配置:

  • 安装依赖:推荐安装0.17.0版本的,之前安装的0.18.5跑不起来
npm install xlsx@0.17.0
  • 如果跑不起来,可以查看下node 和 npm 版本,我用的是:
node -v
v14.17.0
➜ npm -v
6.14.16

二、基本使用

2.1、导出 Excel

import * as XLSX from 'xlsx';
/** 导出表格信息 */
export function exportExcel(data, filename) {
  const ws = XLSX.utils.json_to_sheet(data, { sheetStubs: true });
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, `${filename}.xlsx`);
}

const data = [
{
    a: 1,
    b: 2,
},
{
    a: 1,
    b: 2,
},
{
    a: 1,
    b: 2,
},
{
    a: 1,
    b: 2,
},
];
exportExcel(data, '导出');
  • 效果如图:
    在这里插入图片描述

2.2、导入 Excel

  • utils.js文件
import * as XLSX from 'xlsx';

/**
 * 命令式触发系统文件选择器,并返回所选文件数据
 */
 export async function selectFile({ accept = '.*', multiple = false }) {
   return new Promise((resolve) => {
     const id = 'liuxing-select-file';
     let el = document.querySelector(`#${id}`);
     if (el) {
       document.body.removeChild(el);
     }
     el = document.createElement('input');
     el.setAttribute('id', id);
     el.setAttribute('type', 'file');
     el.setAttribute('accept', accept);
     if (multiple) {
       el.setAttribute('multiple', 'multiple');
     }
     el.style.display = 'none';
     el.addEventListener('change', (event) => {
       const { files } = (event.target);
       if (files) {
         resolve(multiple ? files : files[0]);
       } else {
         resolve(null);
       }
     });
     document.body.append(el);
     el.click();
   });
 }
// 命令时选择并读取文件,返回 ArrayBuffer
export function selectFileAsArrayBuffer(options) {
  return new Promise((resolve) => {
    selectFile(options).then((files) => {
      if (!files || files.length === 0) return resolve(null);

      const fileReader = new FileReader();
      fileReader.addEventListener('load', async (e) => resolve(e.target?.result));
      fileReader.readAsArrayBuffer((options.multiple === true ? files[0] : files));
    });
  });
}

/**
 * 将 Excel 中指定 Sheet 转换为记录列表,配合 {@link selectFileAsArrayBuffer} 一起使用更佳
 */
 export function excel2Records({
  data,
  sheetName,
  header,
  debug = false,
}){
  const workbook = XLSX.read(new Uint8Array(data), { type: 'array' });
  debug && console.debug('workbook', workbook);
  // sheetName 缺省时取第一个 sheet
  if (!sheetName) {
    if (workbook.SheetNames.length > 0) {
      sheetName = workbook.SheetNames[0];
    } else {
      throw new Error('Excel 没有 Sheet 可供导入');
    }
  }
  debug && console.debug('sheetName', sheetName);
  const sheet = workbook.Sheets[sheetName];
  debug && console.debug('sheet', sheet);
  const rows = XLSX.utils
    .sheet_to_json(sheet, {
      // 将 excel 的列头按元素索引顺序映射
      header,
    })
    // 过滤掉表头
    .filter((v, index) => index !== 0);
  debug && console.log('rows', rows);
  console.log(rows);
  return rows;
}
  • 导入文件
import { selectFileAsArrayBuffer, excel2Records } from '@/utils';

// 导入
async handleImportExcel() {
    const arrayBuffer = await selectFileAsArrayBuffer({ accept: '.xlsx', multiple: false });
    if (!arrayBuffer) return;
    const columns = excel2Records({
    data: arrayBuffer,
    // 按顺序设置表头
    header: [
        'a',
        'b',
    ],
    });
    console.log('导入:', columns);
},
  • 获取到的数据:
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐