カスタムページテーブルのインポートエクスポート

Erpシステムと人事管理システムでは、製品情報、従業員情報などのデータを外部ソースからカスタムページに適したフォームに一括インポートする必要がある場合や、逆にこれらのカスタムページの表データをexcel形式のファイルにエクスポートして、さらに分析したり、会社の他の部門と共有したりします。以下では、このようなデータのインポートとエクスポート機能を実現する方法について、具体的な例を挙げて詳しく説明します。

前提条件

• モバイル端末の使用はサポートされていません
• インポートデータは数値フォーマットとテキストフォーマットのみをサポートし、他のデータフォーマットをサポートするには追加の処理が必要です

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• ページ設定のカスタマイズ

このチュートリアルでは、サードパーティのリソースを使用して、次の機能を理解できます。

• Sheetjs

効果を実現する

インポート

エクスポート

実装手順

インポート

1. カスタムページを作成します。

2. Xlsx.jsを導入して、下記のコードをページdidmount関数に追加します。

// 参考文档：https://docs.sheetjs.com/
this.utils.loadScript('https://g.alicdn.com/code/lib/xlsx/0.18.5/xlsx.full.min.js');

3. Excelデータを読み取る関数を追加します。

/**
* 读取 excel
* @param excelFile {File} 需要读取的 excel 文件
*/
export function readExcelData(excelFile = '') {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target.result;
      if (data) {
        // 使用 xlsx 解析 Excel 数据
        const workbook = XLSX.read(data, { type: 'arraybuffer' });
        const sheetName = workbook.SheetNames[0]; // 获取第一个工作表名称
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet); // 转换为 JSON 格式
        resolve(jsonData);
      } else {
        resolve([]);
      }
    };
    reader.readAsArrayBuffer(excelFile);
  });
}

4. アップロードした添付ファイルコンポーネントにイベントを追加し、アップロードしたexcelを読み取り、データを処理します。

// 上传成功
export function onSuccess(file, value) {
  if (value && value.length) {
    this.readExcelData(file.originFileObj).then((tableJson) => {
      const data = tableJson.map((item, index) => {
        return {
          text1: item['单行文本1'], // 表格对应组件标识：item[excel对应的列名称]
          text2: item['单行文本2'],
          text3: item['单行文本3'],
          id: index
        };
      });
      // 写入表格
      this.setState({
        tableData: {
          currentPage: 1,
          data,
          totalCount: data.length,
        },
      })
      this.utils.toast({
        title: '数据导入完成',
        type: 'success'
      });
    });
  }
}

5. 変数を追加してテーブルにバインドします。

{
  currentPage: 1,
  data: [],
  totalCount: 0,
}

6. ページを保存します。

エクスポート

1. カスタムページを作成します。

2. Xlsx.jsを導入して、下記のコードをページdidmount関数に追加します。

// 参考文档：https://docs.sheetjs.com/
this.utils.loadScript('https://g.alicdn.com/code/lib/xlsx/0.18.5/xlsx.full.min.js');

3. Excelをエクスポートする関数を追加します。

export function exportDataToExcel(data = [], sheetHeader = [], fileName = '') {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    const item = {};
    for (let j = 0; j < sheetHeader.length; j++) {
      item[sheetHeader[j].title] = data[i][sheetHeader[j].value];
    };
    result.push(item);
  }
  const workbook = XLSX.utils.book_new(); // 1、创建工作簿
  const worksheet = XLSX.utils.json_to_sheet(result); // 2、创建 Sheet 对象
  worksheet['!cols'] = sheetHeader.map(() => {
    return {
      wch: 20, // 每列的列宽，20代表20个字符，注意中文占2个字符
    };
  }); // 配置 Sheet 的列宽
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 3、将 Sheet 对象加入到工作簿中
  // 4、下载 excel
  const excelBuffer = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array',
  });
  const blob = new Blob(
    [excelBuffer],
    {
      type: 'application/octet-stream;charset=utf-8',
    },
  );
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.dispatchEvent(new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  }));
}

4. 変数を追加します。

{
  currentPage: 1,
  data: [
    {
      text1: 1,
      text2: 'A',
      text3: 'a',
      id: 0
    }, {
      text1: 2,
      text2: 'B',
      text3: 'b',
      id: 1
    }, {
      text1: 3,
      text2: 'C',
      text3: 'c',
      id: 2
    }, {
      text1: 4,
      text2: 'D',
      text3: 'd',
      id: 3
    },
  ],
  totalCount: 4,
}

[]

5. 表行セレクタを設定し、変更コールバックを選択します。

// 选择变动回调
export function onSelectChange(selectedRowKeys, records) {
  this.setState({
    records,
  });
}

6. テーブルのトップアクションを設定します。

// 导出数据
export function onExportData() {
  const { records = [] } = this.state;
  if (records.length) {
    this.exportDataToExcel(
      records,
      [{
        title: '单行文本1',
        value: 'text1'
      }, {
        title: '单行文本2',
        value: 'text2'
      }, {
        title: '单行文本3',
        value: 'text3'
      }],
      `自定义页面表格导入导出_${this.utils.formatter('date', Date.now(), 'YYYYMMDDhhmmss')}.xlsx`
    );
  } else {
    this.utils.toast({
      title: '当前未选中任何数据，请选择数据后重试',
      type: 'error',
    });
  }
}

7. ページを保存します。

オンラインで試遊する