繁体   English   中英

Angular:从客户端打开、显示和修改 XML 文件

[英]Angular: Open, Display and modify XML file from client side

在我的菜单栏中“打开”后:

  1. 用户可以从 PC(客户端)中选择一个 xml 文件

  2. xml 文件转换为 json。 来自 json 流的数据用于设置值是几个输入控件。

  3. 用户可以更新输入控件中的数据并将数据(在菜单中使用“保存”)保存在同一个 xml 文件中。

是否可以在不将文件上传到服务器的情况下执行第 2 步? 如何 ?

第3步可能吗? 如何 ?

我对做棘手的事情不感兴趣。

谢谢,

兹维卡

正如我理解你的问题。 在这里你可以使用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});
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM