Как мне прочитать файл XML (из другого каталога, скажем, из destop) в Angular 7? - PullRequest
Новая
       8

Как мне прочитать файл XML (из другого каталога, скажем, из destop) в Angular 7?

0 голосов
/ 07 октября 2019

Я настраиваю функцию импорта XML. В этом случае мы должны загрузить XML-файл из любого места, например, с рабочего стола, преобразовать XML-данные в JSON (что делается с помощью xml2json). Но проблема возникает во время загрузки файла. Код приведен ниже

LutCrud.html 

 <div  div fxLayout="row" fxLayoutAlign="end" mat-dialog-content *ngIf="isUpload">
            <input mat-raised-button matTooltip="XML Import" class="LutButtons" type='file' accept='text/xml' (change)='openFile($event)'>            
          </div>

LutCrud.ts 

import { Component, Input } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';

export class HelloComponent  {
  @Input() name: string;
  fileToUpload: any;
  http: HttpClient;
    xmlItems: any;

// ----------------------------------------------------
  openFile(event) {
    this.fileToUpload = event.target.files[0];
    this.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      console.log(data);
      }, error => {
        console.log(error);
      });
  }


  postFile(fileToUpload: File): any {
console.log(fileToUpload.name);
this.http.get(+'./' + fileToUpload.name
  , { headers: new HttpHeaders()
    .set('Content-Type', 'text/xml')
    .append('Access-Control-Allow-Methods', 'GET')
    .append('Access-Control-Allow-Origin', '*')
    .append('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method'),  
    responseType: 'text'
})
.subscribe((data) => {
  this.parseXML(data).then((data1) => {
      this.xmlItems = data1;
    });
});


}

parseXML(data) {
 // Here
  let parseString = require('xml2js').parseString;
       let xml = '<root>Hello xml2js!</root>';
       parseString(xml, function (err, result){
         console.dir(result);
});}

}

Соответствующая ошибкапоказано на рисунке ниже.

enter image description here

Я думаю, в строке this.http.get(+'./' + fileToUpload.name есть ошибка. Если есть какая-либо ошибка или какой-либо другой способ, пожалуйста, помогите мне.

MRC приведен ниже по ссылке: https://stackblitz.com/edit/angular-m8e88a

1 Ответ

1 голос
/ 17 октября 2019

После стольких поисков исправили приведенный выше код и опубликовали. Так что я могу обобщить код. LUT.html (образец) 

<div  div fxLayout="row" fxLayoutAlign="end" mat-dialog-content >
            <input mat-raised-button matTooltip="XML Import" class="LutButtons" type='file' accept='text/xml' (change)='openFile($event)'>            
          </div>

LUT.ts 

 openFile(event) {

  if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.readAsText(event.target.files[0]); // read file as data url
        reader.onload = (event) => { // called once readAsDataURL is completed
        var parser = new DOMParser(),
        xmlDoc = parser.parseFromString(reader.result as string, 'text/xml');

        if (xmlDoc.documentElement) {           
            this.parseXML(xmlDoc.documentElement.firstElementChild.innerHTML);
        } else {
          console.log('NO DATA');
        }
        }
      }

    }

  parseXML(data) {
    // Here
    var result;
    var parseString = require('xml2js');
         let xml = data;
         parseString.Parser().parseString(xml, (err, r) => {
           result = r;
           console.log(result);
           this.xmlData = result;
       });
  this.importedData.emit(this.xmlData);
  if (this.xmlData != null) {
    this.isUpload = false;
  }
...