react-前端封装导入导出方法

一、通用导出方法

/**
 * Export file
 * @param {*} filename: Export file name
 * @param {*} text: Export file content
 * @param {*} format: Export file format
 */
export function downloadTXT(filename, text, format) {
  const link = document.createElement('a');
  link.setAttribute('href', `data:text/${format};charset=utf-8,${encodeURIComponent(text)}`);
  link.setAttribute('download', filename);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

上述方法对于一些导出cxv或者excel 等 ，内容有汉字的话可能会导致乱码，有如下解决办法：

/**
 * Export file
 * @param {*} filename: Export file name
 * @param {*} text: Export file content
 * @param {*} format: Export file format
 * @param {*} isImport: Whether to import, optional parameters
 */
export function downloadTXT(filename, text, format, isImport) {
  const link = document.createElement('a');
  if (isImport) {
    link.setAttribute('href', `data:text/${format};charset=utf-8,${encodeURIComponent(text)}`);
  } else {
    // "\ ufeff" to solve the problem of CSV Chinese garbled code
    const blob = new Blob([`\ufeff${text}`], {
      type: `data:text/${format};charset=utf-8`,
    });
    const url = URL.createObjectURL(blob);
    link.href = url;
  }
  link.setAttribute('download', filename);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

二、导出 txt形式的json的调用

 const content= JSON.stringify(jsonPayload);
 const exportName = `xxx.json`;
 downloadTXT(exportName, content, 'plain'， true);

三、导入txt形式的json

css

.uploadFile{
    display: none;
      }
      button {
          margin: 5px;
          cursor: pointer;
      }

html

// 采用button 组件遮挡原生type=file的形式
  <Button
     autoFocus
      color="primary"
      btnContent={importContent}
      btnFunc={btnImportFunc}
    />
 <input className="uploadFile" type="file" accept="application/json" onChange={previewFile} ref={fileRef} />

js

import React, {useRef } from 'react';
const fileRef = useRef();
  /**
   * Import file parsed data
   */
  const previewFile = () => {
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();
    reader.onload = () => {
      const index = file.name.lastIndexOf('.');
      const ext = file.name.substr(index + 1);
      const pattern = /^(json)$/;
      if (!pattern.test(ext)) {
        fileRef.current.value = '';
        return;
      }

      const preview = Base64.decode(reader.result.split(',')[1]); // 导入的内容
      /**
      // 调用
      const templateFlag = checkImportTemValue(preview, xmlParseJsonData);
      if (!templateFlag.boolVal) {
        enqueueSnackbar(intl.formatMessage({ id: 'intl.fail-rule' }), {
          variant: 'error',
          autoHideDuration: null,
        });
        fileRef.current.value = '';
        return;
      }

     */

      fileRef.current.value = '';
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  };

// 以上仅供参考，可在此基础上做修改

四、导出csv形式的调用(excel表格)

/**
 * Export table list
 * @param {*} tableHeadTitle: Export required header
 * @param {*} tableList: Export required list
 * @returns
 */
export function exportTableData(tableHeadTitle, tableList) {
  const arr = tableList.map((item) => {
    const obj = {};
    tableHeadTitle.forEach((itm, idx) => {
      obj[tableHeadTitle[idx]] = item[itm];
    });
    return obj;
  });
  console.log('arr', arr);
  const exportContentFile = `${tableHeadTitle.join(',')}\n${
    arr.map((item) => {
      const filterKeyArr = Object.keys(item);
      let result = '';
      filterKeyArr.forEach((itm) => {
        // Added \t to prevent tables from displaying scientific notation or other formats
        result += `${`${item[itm]}\t`},`;
      });
      return result;
    }).join('\n')}`;
  return exportContentFile;
}


export const DIAGNOSTICS_EXPORT_TABLE_HEAD = ['timeGenerated', 'level', 'operationName', 'properties'];
 const exportContentFile = exportTableData(
        DIAGNOSTICS_EXPORT_TABLE_HEAD,
        paramsTableList,
      );
      const exportName = `${enrollmentId}-${new Date().getTime()}.csv`;
      downloadTXT(exportName, exportContentFile, EXPORT_CSV);