Angular：從客戶端打開、顯示和修改 XML 文件

Question

在我的菜單欄中“打開”后：

1. 用戶可以從 PC（客戶端）中選擇一個 xml 文件

2. xml 文件轉換為 json。 來自 json 流的數據用於設置值是幾個輸入控件。

3. 用戶可以更新輸入控件中的數據並將數據（在菜單中使用“保存”）保存在同一個 xml 文件中。

是否可以在不將文件上傳到服務器的情況下執行第 2 步？ 如何 ？

第3步可能嗎？ 如何 ？

我對做棘手的事情不感興趣。

謝謝，

茲維卡

Answer 1

正如我理解你的問題。 在這里你可以使用xml-js

參考演示

代碼段

演示 XML

<?xml version="1.0"?>
<Company>
  <Employee>
      <FirstName>Jorge</FirstName>
      <LastName>Linkon</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>Jorge@linkon.com</Email>
      <Address>
           <City>Florida</City>
           <State>US</State>
           <Zip>123456</Zip>
      </Address>
  </Employee>
</Company>

像這樣配置你的組件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup} from '@angular/forms'
import * as converter from 'xml-js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  formGroup : FormGroup;
  outputXml : any ;
  inputXml : any;

  constructor(private _fb : FormBuilder){
  }

  selectFile(event){
    const reader = new FileReader();
    reader.onload = (e: any) => {
      let xml = e.target.result;
      this.inputXml = xml;
      let result1 = converter.xml2json(xml, {compact: true, spaces: 4});

      const JSONData = JSON.parse(result1);
      this.formGroup.patchValue(JSONData)
        }
    reader.readAsText(event.target.files[0])
  }

  createForm(){
    this.formGroup = this._fb.group({
        _declaration: {
          _attributes: {
            version: "1.0"
          }
        },
      Company : this._fb.group({
        Employee : this._fb.group({
          FirstName : this._fb.group({
            _text : [null]
          }),
          LastName : this._fb.group({
            _text : [null]
          }),
          ContactNo :  this._fb.group({
            _text : [null]
          }),
          Email : this._fb.group({
            _text : [null]
          }),
          Address : this._fb.group({
            City : this._fb.group({
              _text : [null]
            }),
            State : this._fb.group({
              _text : [null]
            }),
            Zip : this._fb.group({
              _text : [null]
            })
          }),

        })
      })
    })
  }

  ngOnInit(){
    this.createForm();
  }
  onSave(){
    const str = JSON.stringify(this.formGroup.value);
    this.outputXml = converter.json2xml(str, {compact: true,spaces: 4});
  }
}