JavsScript 实现文件的导入与导出

发布于2022年09月12日

更新于2026年03月06日

分类前端

标签

JavaScript

导入

const handleIn = () => {
  // 1.点击导入
  const input = document.querySelector('.fileInput') as HTMLInputElement;
  input.click();

  input.onchange = () => {
    // 2.导入文件后，获取文件
    const file = input.files[0];

    // 3.读取文件内容
    const reader = new FileReader();
    reader.readAsText(file, 'utf-8');
    reader.onload = (res) => {
      const json = JSON.parse(res.target?.result as string);
    };
  };
};

导出

const handleOut = () => {
  // 1.创建一个对象用于存储数据
  let obj = {};

  // 2.将对象转换为字符串形式
  const data = JSON.stringify(obj);

  // 3.将字符串转为二进制
  const blob = new Blob([data], { type: 'text/json' });

  // 4.创建一个a标签用于下载
  const link = document.createElement('a');

  // 5.设置文件的路径与名字
  link.href = window.URL.createObjectURL(blob);
  link.download = `H2记账.json`;

  // 6.添加a标签->点击->移除a标签
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};