각도 4에서 Excel로 내보내기

각도 4에서 Excel로 내보내기

Angular 4를 사용하여 동적으로 채워지는 데이터 테이블이 있습니다.그 테이블을 엑설런트로 수출하고 싶습니다.Angular 4에서 어떻게 하면 이걸 달성할 수 있을까요?.csv가 아닌 .xls를 찾고 있습니다.

추신: 저는 Jquery 라이브러리를 사용하고 싶지 않습니다.

내 앱 구성 요소는 이렇게 생겼지만,

    <table id ="dataTable" class = "table table-hover">
  <thead>
      <tr>
          <th>Date</th>
          <th>Address</th>
          <th>Mode</th>
          <th>Distance</th>
          <th>Fare</th>
          <th></th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let date of dateList;let i = index">
          <td>{{date}}</td> 
          <td>{{address}}</td>
          <td>{{mode}}</td>
          <td>{{distance}}</td>
          <td>{{fare}}</td>
          <td>
             <a>Delete</a>
          </td>   
      </tr>
  </tbody>
</table>

여전히 효과적인 답을 찾고 있는 분들을 위해.

public export() {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.myDataModels);
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    /* save to file */
    XLSX.writeFile(wb, this.createFileName());
}

자동으로 xlsx 파일로 저장 https://github.com/SheetJS/js-xlsx/tree/19620da30be2a7d7b9801938a0b9b1fd3c4c4b00/demos/angular2 에서 가져왔습니다.

XLSX를 수출용으로 사용하여 우수하게 수출할 수 있습니다.

json 또는 array in excel을 지원합니다.

샘플코드

import * as XLSX from 'xlsx';

public exportAsExcelFile(json: any[], excelFileName: string): void {
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
  const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
  const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
  this.saveAsExcelFile(excelBuffer, excelFileName);
}

저장용

private saveAsExcelFile(buffer: any, fileName: string): void {
  const data: Blob = new Blob([buffer], {
    type: EXCEL_TYPE
  });
  const today = new Date();
  const date = today.getFullYear() + '' + (today.getMonth() + 1) + '' + today.getDate() + '_';
  const time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
  const name = fileName + date + time;
  FileSaver.saveAs(data, name + EXCEL_EXTENSION);
}

각도 2+에 대한 참조

각도 2+에 대한 Xlsx

사용만 가능합니다.xlsx라이브러리를 사용하여 엑셀파일을 작성하고 저장하는 동시에XLSX.writeFile()

exportExcel(data: any[]){
   const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
   const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
   XLSX.writeFile(workbook, 'my_file.xls', { bookType: 'xls', type: 'buffer' });
}

라이브러리 설치 전

npm i file-saver
npm i xlsx

이름 클래스 엑셀서비스 ngs 엑셀/엑셀서비스로 서비스 엑셀 만들기 코드 아래 복사 가능

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';
@Injectable({
  providedIn: 'root'
})
export class ExcelServiceService {
  constructor() { }
  public exportAsExcelFile(json: any[], excelFileName: string): void {

    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    console.log('worksheet',worksheet);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }
  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }
}

have class 국가에서 폴더 모델 만들기정보

export class CountryInfo {
    country: string;
    hydro: number;
    oil: number;
    gas: number;
    coal: number;
    nuclear: number;
}

github에서 파일 excel 파일 export 예제를 각도로 복제할 수 있습니다.

마이크로소프트는 Angular와 함께 사용할 수 있는 자바스크립트 플러그인을 제공하는 것 같습니다.

언급URL : https://stackoverflow.com/questions/48802074/export-to-excel-on-angular-4