天天看點

Angular4 導出Excel檔案

*.ts

把json資料導出到Excel檔案

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

exportAsExcelFile() {
    let json = [{
        "姓名": "***", "工號": "***", "英文名": "***", "部門": "**", "性别": "1", "手機": "+861**********", "個人郵箱": "****@**.com"
     }];
    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: 'array' });
    this.saveAsExcelFile(excelBuffer, "模闆");
}

private saveAsExcelFile(buffer: any, fileName: string) {
    const data: Blob = new Blob([buffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + '.xlsx');
}
           

使用http服務下載下傳Excel檔案到本地

import { Http } from '@angular/http';

constructor(
    private http: Http
) { }
exportService(){
    let downloadUrl= `../../assets/模闆.xls`;
    return this.http.get(downloadUrl,{responseType:3}).map(res => {
        return res;
    });
}

exportAsExcelFile() {
    this.exportService().subscribe(res => {
        // let res=res.json();可能要轉化類型
        var blob = new Blob([res.json()], { 
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 
        });
        var objectUrl = URL.createObjectURL(blob);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display:none');
        a.setAttribute('href', objectUrl);
        a.setAttribute('download', '模闆.xlsx');
        a.click();
        document.body.removeChild(a);
        //釋放URL位址
        URL.revokeObjectURL(objectUrl);
    });
}
           

繼續閱讀