Angular: открытие, отображение и изменение XML-файла со стороны клиента

Question

После открытия в моей строке меню:

1. пользователь может выбрать 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});
  }
}