浏览器导出(下载)文件，并导入(上传)解析；JSON 字符串格式化

导入导出文件

浏览器环境是没有 Nodejs 的 fs 之类的 api 的，而且网页也不支持本地写入和读取文件的能力。

但是浏览器环境可以用这些 api 进行替代：

• 导出直接用 a 标签下载，可以支持 base64 的形式
• 导入用 FileReader 读取文件内容

// 生成文件并下载
export const generatorFile = (str: string) => {
  const element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(str));
  element.setAttribute('download', 'test.json');

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
};

// 解析文件内容
export const AnalysisFile = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsText(file, 'utf-8');
    reader.onloadend = evt => {
      resolve(evt.target?.result as string);
    };
    reader.onerror = e => {
      reject(e);
    };
  });
};

使用

  const handleImport = async (file: File) => {
      try {
        const str = await AnalysisFile(file.originFile);
        console.log('解析出来的文本：', JSON.parse(str));
        // 做点别的
      } catch (e: any) {
        Message.error('文件解析失败，请修改');
      }
  };


  const handleExport = async () => {
    try {
      const obj = {
        //...
      };
      generatorFile(JSON.stringify(obj, null, '\t'));
    } catch (e: any) {
      Message.error('生成文件失败');
    }
  };

JSON 字符串格式化

本来以为很难搞，然后发现 JSON.stringify 能直接通过传参实现，写到文件里就是带缩进的版本了：

const obj = { aaa: 1, bbb: '2', ccc: { ddd: 1 } };

generatorFile(JSON.stringify(obj, null, '\t'));

编辑器打开生成的文件：