如何使用 Angular 在文件中以 BLOB 形式写入和读取不同的 JSON 对象

Question

在我的 Angular 程序中，有一个名为 myObj 的类和一个名为 myArrayObj 的数组，其中包含许多 myObj 实例。

我目前正在将其存储到Blob中并写入文件，如下所示。

    const blob = new Blob([JSON.stringify([myArrayObj])], { type: 'application/json' });
    saveAs(blob, `${myFileName}.json`);

要从文件中检索内容，我有另一组代码。

    const fileReader = new FileReader();
    fileReader.onload = (e) => {
       const content = e.target?.result;
       if (typeof content === 'string') {
          const myArrayObj = JSON.parse(content);
       }

我的问题是我想将单个设置对象（mySettingObject）保存到文件中，在此数组之前。我该怎么做？稍后如何检索设置对象和数组？

Answer 1

我们可以创建一个复杂的对象，具有两个属性

settings

（包含

mySettingObject

）和

array

，然后我们执行下载。

downloadFile() {
  const mySettingObject = {
    qwerty: 1,
  };
  const myArrayObj = {
    settings: mySettingObject,
    array: [{ test: 1 }, { test: 2 }, { test: 3 }],
  };
  const myFileName = 'test';
  const blob = new Blob([JSON.stringify(myArrayObj)], {
    type: 'application/json',
  });
  this.saveAs(blob, `${myFileName}.json`);
}

saveAs(blob: any, filename: any) {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
}

上传时，我们使用

FileReader

、

readAsText

以

UTF-8

格式读取。最后，我们再次使用相同的属性名称重新访问这些属性。

onSelectFile(event: any) {
  this.selectedFile = event.target.files[0];
  const fileReader = new FileReader();
  fileReader.readAsText(this.selectedFile, 'UTF-8');
  fileReader.onload = () => {
    const data = JSON.parse(<string>fileReader.result);
    console.log('settings', data.settings);
    console.log('settings', data.array);
  };
  fileReader.onerror = (error) => {
    console.log(error);
  };
}

完整代码：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="downloadFile()">download</button>
    <hr/>
    <input type='file' (change)="onSelectFile($event)">
  `,
})
export class App {
  name = 'Angular';
  selectedFile: any;

    downloadFile() {
      const mySettingObject = {
        qwerty: 1,
      };
      const myArrayObj = {
        settings: mySettingObject,
        array: [{ test: 1 }, { test: 2 }, { test: 3 }],
      };
      const myFileName = 'test';
      const blob = new Blob([JSON.stringify(myArrayObj)], {
        type: 'application/json',
      });
      this.saveAs(blob, `${myFileName}.json`);
    }

    saveAs(blob: any, filename: any) {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
    }

    onSelectFile(event: any) {
      this.selectedFile = event.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsText(this.selectedFile, 'UTF-8');
      fileReader.onload = () => {
        const data = JSON.parse(<string>fileReader.result);
        console.log('settings', data.settings);
        console.log('settings', data.array);
      };
      fileReader.onerror = (error) => {
        console.log(error);
      };
    }
}

bootstrapApplication(App);

Stackblitz 演示