Excel表格下載和讀取
阿新 • • 發佈：2021-06-25
SheetJS js-xlsx 的使用
js-xlsx 官方文件：https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx
https://docs.sheetjs.com/#sheetjs-js-xlsx
npm xlsx地址：https://www.npmjs.com/package/xlsx
官網：https://sheetjs.com/opensource
npm install file-saver --save
npm install @types/file-saver --save-dev
npm install xlsx --save
<!-- <button mat-raised-button color="primary" (click)="exportTable()">匯出</button> --> <button type="button" class="btn btn-sm btn-success" (click)="exportTable()">匯出2</button> <!-- <div id="exportableTable" class="hidden-table"> <table> <thead> <tr> <th>就好多了</th> <th>就好多了</th> <th>就好多了</th> <th>就好多了</th> <th>就好多了</th> <th>就好多了</th> </tr> </thead> <tbody> <tr> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> </tr> <tr> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> <td>大家儘快</td> </tr> </tbody> </table> </div> -->
import { Component, OnInit } from '@angular/core'; import * as FileSaver from 'file-saver'; import { saveAs } from "file-saver"; import * as XLSX from 'xlsx'; @Component({ selector: 'app-history', templateUrl: './history.component.html', styleUrls: ['./history.component.scss'] }) export class HistoryComponent implements OnInit { constructor() { } ngOnInit(): void {} // exportTable() { // const blob = new Blob([document.getElementById('exportableTable').innerHTML], { // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" // }); // saveAs(blob, 'test.xls'); // } jsonData: any = [ { "姓名": "張三", "工號": "22", "英文名": "zhangsan", "部門": "技術部", "性別": "男", "手機": "15177641999", "個人郵箱": "[email protected]" }, { "姓名": "李四", "工號": "33", "英文名": "李四", "部門": "人事部", "性別": "女", "手機": "15177641988", "個人郵箱": "[email protected]" }]; exportTable() { const exportItem = this.jsonData; const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportItem); console.log("worksheet",worksheet) const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] }; console.log("workbook",workbook) const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); console.log("excelBuffer",excelBuffer) this.saveAsExcelFile(excelBuffer, 'report'); } 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 + '.xlsx'); } }
https://www.cnblogs.com/lvsk/p/11970747.html
exportExcle() { // 使用 XLSX.utils.aoa_to_sheet(excleData); // const excleData = [ // ['週一', '週二', '週三', '週四', '週五'], // ['語文', '數學', '歷史', '政治', '英語'], // ['數學', '數學', '政治', '英語', '英語'], // ['政治', '英語', '歷史', '政治', '數學'], // ]; // 使用 XLSX.utils.json_to_sheet(excleData); const excleData = [ {週一: '語文', 週二: '數學', 週三: '歷史', 週四: '政治', 週五: '英語'}, {週一: '數學', 週二: '數學', 週三: '政治', 週四: '英語', 週五: '英語'}, {週一: '政治', 週二: '英語', 週三: '歷史', 週四: '政治', 週五: '數學'}, ]; // 設定表格樣式，!cols為列寬 const options = { '!cols': [ { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, ]}; // 製作工作表的方式有很多種，以陣列和物件為例 // const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(excleData); const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(excleData); // 使用指定的單元格作為起點插入資料，r：行， c：列，詳情看官網文件 // XLSX.utils.sheet_add_aoa(worksheet, [[“數學”，“語文”], [“政治”，“語文”], [“歷史”，“政治”], ], {origin: {r: 2, c: 5}}); worksheet['!cols'] = options['!cols']; // 新建一個工作簿 const workbook: XLSX.WorkBook = XLSX.utils.book_new(); /* 將工作表新增到工作簿*/ XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); /* 輸出工作表， 由檔名決定的輸出格式*/ XLSX.writeFile(workbook, '排庭表.xlsx'); }
ExcelJS
https://github.com/exceljs/exceljs/blob/master/README_zh.md
https://github.com/exceljs/exceljs
import { AfterViewInit, Component, ElementRef, EmbeddedViewRef, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import * as FileSaver from 'file-saver';
import { saveAs } from "file-saver";
import * as XLSX from 'xlsx';
import * as Excel from 'exceljs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.exportExcle()
}
exportExcle() {
const excleData = [
['週一', '週二'],
['語文', '數學'],
['數學', '英語'],
];
const workbook = new Excel.Workbook();
const sheet = workbook.addWorksheet('Sheet1');
sheet.addRows(excleData);
sheet.eachRow((row, rowNumber) => {
row.eachCell((cell, colNumber) => {
// 對齊樣式
if (rowNumber === 1 || colNumber === 1) {
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
} else {
cell.alignment = { vertical: 'top', horizontal: 'left', wrapText: true };
}
// 邊框
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
// 設定列寬
sheet.getColumn(colNumber).width = 25;
// sheet.getColumn(colNumber).width = 25;
});
});
sheet.getRow(1).height = 30;
workbook.xlsx.writeBuffer()
.then((buffer) => {
// done
this.saveAsExcelFile(buffer, '課表');
});
}
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 + '.xlsx');
}
}