在我的 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)保存到文件中,在此数组之前。我该怎么做?稍后如何检索设置对象和数组?
我们可以创建一个复杂的对象,具有两个属性
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);