Angular集成预览表格内容js-xlsx
deepthan opened this issue · 0 comments
deepthan commented
集成预览表格内容js-xlsx
1. 首先下载依赖
yarn add xlsx
2. 再在html中写一个上传按钮和表格
html
<input type="file" (change)="onFileChange($event)" multiple="false" />
<table>
<tr *ngFor="let row of data" style="border:1px #ccc solid; padding:5px;">
<td *ngFor="let val of row" style="border:1px #ccc solid; padding:5px;">
{{val}}
</td>
</tr>
</table>
3. ts中引入xlsx插件并使用
ts:
import * as XLSX from 'xlsx';
...
export class xxx {
data: any;
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];
/* 保存数据,映射到页面 */
this.data = <any>(XLSX.utils.sheet_to_json(ws, {header: 1}));
};
reader.readAsBinaryString(target.files[0]);
}
}
js-xlsx: https://github.com/SheetJS/js-xlsx/tree/master/demos/angular2