Блог

Главная - Вопросы по программированию - Angular / Typescript считывает файл Excel с URL-адреса

Angular / Typescript считывает файл Excel с URL-адреса

#excel #angular #typescript

#excel #angular #typescript

Вопрос:

Мне нужно, чтобы мое приложение могло считывать подготовленный файл Excel (расположенный в моем домене ( www.***.com/data.xlsx )) в массив. Следующий код работает как шарм для этой цели, но его клиент основан на том, где пользователь просматривает и вводит xlsx файл.

 import {
  Component,
  OnInit
} from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-excelsheet',
  templateUrl: './excelsheet.component.html',
  styleUrls: ['./excelsheet.component.css']
})
export class ExcelsheetComponent implements OnInit {

  data: [][];
  constructor() {}

  ngOnInit(): void {}
  onFileChange(evt: any) {
    const target: DataTransfer = <DataTransfer>(evt.target);

    if (target.files.length !== 1) throw new Error('Cannot use multiple files');

    const reader: FileReader = new FileReader();

    reader.onload = (e: any) => {
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {
        type: 'binary'
      });
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      console.log(ws);

      this.data = (XLSX.utils.sheet_to_json(ws, {
        header: 1
      }));

      console.log(this.data);

      let x = this.data.slice(1);
      console.log(x);
    };

    reader.readAsBinaryString(target.files[0]);
  }
}

Я пробовал разные способы методом проб и ошибок, тестировал функции и переменные, другие библиотеки, читал о клиенте / сервере, но все же сейчас я как бы в тупике, возможно, потому, что у меня меньше опыта в JavaScript.

Короче говоря, как мое приложение может считывать файл Excel (из URL-адреса) в массив при каждом запуске приложения?

Для дополнительной информации я также попытался вставить файл Excel в каталог приложения, но все же…

Я знаю, что я должен был поставить свою попытку кода для вас, ребята, для устранения неполадок, но я просто подумаю, что это просто странные попытки, поскольку я действительно новичок. Я надеюсь, что вы, ребята, сможете кратко перечислить, что я должен использовать и делать, заранее спасибо, я ценю это.

Комментарии:

1. Более традиционным подходом было бы поместить эти данные в базу данных. В противном случае, почему бы не экспортировать xlsx в формате CSV и использовать его вместо этого? Гораздо проще в использовании.

2. @spender причина отказа от использования базы данных заключается в том, что я собираюсь только прочитать файл. я действительно не против использовать csv, я имею в виду, что если csv проще импортировать либо через URL, либо через локальный каталог приложений, это определенно выбор для меня на данный момент. это проще? в любом случае спасибо за ваш комментарий, ценю это.

Ответ №1:

После дополнительных исследований и тестирования я, наконец, сделал это, используя тот же js-xlsx. Я надеюсь, что это поможет тому, кто беспокоит в будущем.

 import * as XLSX from 'xlsx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  load(){
    
  var url = "http://ururl.com/excelfile.xlsx";
  var oReq = new XMLHttpRequest();
  oReq.open("GET", url, true);
  oReq.responseType = "arraybuffer";

  oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for(var i = 0; i != data.length;   i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {type:"binary"});

  /* DO SOMETHING WITH workbook HERE */
  var first_sheet_name = workbook.SheetNames[0];
  /* Get worksheet */
  var worksheet = workbook.Sheets[first_sheet_name];
  let x = XLSX.utils.sheet_to_json(worksheet,{raw:true});
  console.log(x);
  
}

oReq.send();
  }
}