ng-cw-v12
Version:
Angular UI Component Library
67 lines • 9.54 kB
JavaScript
import { __awaiter } from "tslib";
import { Component, Input } from '@angular/core';
import * as XLSX from 'xlsx-js-style';
import * as i0 from "@angular/core";
export class ExcelViewerComponent {
constructor(eleRef) {
this.eleRef = eleRef;
/** excel文件地址 */
this.ncUrl = '';
/** 是否显示工作表名称 */
this._sheetName = false;
}
set ncSheetName(value) {
this._sheetName = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncSheetName() {
return this._sheetName;
}
ngOnChanges(changes) {
if (changes['ncUrl']) {
this.renderExcelDocument();
}
}
renderExcelDocument() {
return __awaiter(this, void 0, void 0, function* () {
const response = yield fetch(this.ncUrl);
const blob = yield response.blob();
const reader = new FileReader();
//通过readAsArrayBuffer将blob转换为ArrayBuffer对
reader.readAsArrayBuffer(blob);
reader.onload = (event) => {
var _a;
// 读取ArrayBuffer数据变成Uint8Array
const data = new Uint8Array((_a = event.target) === null || _a === void 0 ? void 0 : _a.result);
// 这里的data里面的类型和后面的type类型要对应
const workbook = XLSX.read(data, { type: "array" });
const sheetNames = workbook.SheetNames; // 工作表名称
let htmlArray = [];
for (let i = 0; i < sheetNames.length; i++) {
// var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
const worksheet = workbook.Sheets[sheetNames[i]];
if (this.ncSheetName) {
htmlArray.push(`<h2>${sheetNames[i]}</h2>`);
}
htmlArray.push(XLSX.utils.sheet_to_html(worksheet));
}
const container = this.eleRef.nativeElement.querySelector('#excel-container');
container.innerHTML = htmlArray.join('');
};
});
}
}
ExcelViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ExcelViewerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ExcelViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ExcelViewerComponent, selector: "nc-excel-viewer", inputs: { ncUrl: "ncUrl", ncSheetName: "ncSheetName" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"excel-container\"></div>\n", styles: ["#excel-container{width:100%;height:100%;padding:10px}#excel-container ::ng-deep table{border-collapse:separate;border-spacing:0;border-right:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;margin-bottom:10px}#excel-container ::ng-deep table:last-child{margin-bottom:0}#excel-container ::ng-deep table td{border-left:1px solid #d6d6d6;border-top:1px solid #d6d6d6;padding:5px 10px;text-align:center;white-space:nowrap}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ExcelViewerComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-excel-viewer',
templateUrl: './excel-viewer.component.html',
styleUrls: ['./excel-viewer.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncUrl: [{
type: Input
}], ncSheetName: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhjZWwtdmlld2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvZXhjZWwtdmlld2VyL2V4Y2VsLXZpZXdlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2V4Y2VsLXZpZXdlci9leGNlbC12aWV3ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUN2RixPQUFPLEtBQUssSUFBSSxNQUFNLGVBQWUsQ0FBQzs7QUFPdEMsTUFBTSxPQUFPLG9CQUFvQjtJQVkvQixZQUFvQixNQUFrQjtRQUFsQixXQUFNLEdBQU4sTUFBTSxDQUFZO1FBWHRDLGdCQUFnQjtRQUNQLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDNUIsZ0JBQWdCO1FBQ1IsZUFBVSxHQUFZLEtBQUssQ0FBQztJQVFNLENBQUM7SUFQM0MsSUFBYSxXQUFXLENBQUMsS0FBdUI7UUFDOUMsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLEtBQUssSUFBSSxJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLEtBQUssSUFBSSxLQUFLLEtBQUssT0FBTyxDQUFDO0lBQ2xHLENBQUM7SUFDRCxJQUFJLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDekIsQ0FBQztJQUlELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUNwQixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztTQUM1QjtJQUNILENBQUM7SUFFSyxtQkFBbUI7O1lBQ3ZCLE1BQU0sUUFBUSxHQUFHLE1BQU0sS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN6QyxNQUFNLElBQUksR0FBRyxNQUFNLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNuQyxNQUFNLE1BQU0sR0FBRyxJQUFJLFVBQVUsRUFBRSxDQUFDO1lBQ2hDLHlDQUF5QztZQUN6QyxNQUFNLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDL0IsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLEtBQUssRUFBRSxFQUFFOztnQkFDeEIsOEJBQThCO2dCQUM5QixNQUFNLElBQUksR0FBRyxJQUFJLFVBQVUsQ0FBQyxNQUFBLEtBQUssQ0FBQyxNQUFNLDBDQUFFLE1BQXFCLENBQUMsQ0FBQztnQkFDakUsNEJBQTRCO2dCQUM1QixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQyxDQUFDO2dCQUNwRCxNQUFNLFVBQVUsR0FBRyxRQUFRLENBQUMsVUFBVSxDQUFDLENBQUMsUUFBUTtnQkFDaEQsSUFBSSxTQUFTLEdBQUcsRUFBRSxDQUFDO2dCQUNuQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtvQkFDMUMsOERBQThEO29CQUM5RCxNQUFNLFNBQVMsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO29CQUNqRCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7d0JBQ3BCLFNBQVMsQ0FBQyxJQUFJLENBQUMsT0FBTyxVQUFVLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDO3FCQUM3QztvQkFDRCxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUM7aUJBQ3JEO2dCQUNELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO2dCQUM5RSxTQUFTLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDM0MsQ0FBQyxDQUFDO1FBQ0osQ0FBQztLQUFBOztpSEE1Q1Usb0JBQW9CO3FHQUFwQixvQkFBb0Isb0lDUmpDLHNDQUNBOzJGRE9hLG9CQUFvQjtrQkFMaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixXQUFXLEVBQUUsK0JBQStCO29CQUM1QyxTQUFTLEVBQUUsQ0FBQywrQkFBK0IsQ0FBQztpQkFDN0M7aUdBR1UsS0FBSztzQkFBYixLQUFLO2dCQUdPLFdBQVc7c0JBQXZCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0ICogYXMgWExTWCBmcm9tICd4bHN4LWpzLXN0eWxlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmMtZXhjZWwtdmlld2VyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZXhjZWwtdmlld2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9leGNlbC12aWV3ZXIuY29tcG9uZW50Lmxlc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRXhjZWxWaWV3ZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gIC8qKiBleGNlbOaWh+S7tuWcsOWdgCAqL1xyXG4gIEBJbnB1dCgpIG5jVXJsOiBzdHJpbmcgPSAnJztcclxuICAvKiog5piv5ZCm5pi+56S65bel5L2c6KGo5ZCN56ewICovXHJcbiAgcHJpdmF0ZSBfc2hlZXROYW1lOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgc2V0IG5jU2hlZXROYW1lKHZhbHVlOiBib29sZWFuIHwgc3RyaW5nKSB7XHJcbiAgICB0aGlzLl9zaGVldE5hbWUgPSB2YWx1ZSAhPT0gbnVsbCAmJiB2YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHZhbHVlICE9PSBmYWxzZSAmJiB2YWx1ZSAhPT0gJ2ZhbHNlJztcclxuICB9XHJcbiAgZ2V0IG5jU2hlZXROYW1lKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuX3NoZWV0TmFtZTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlUmVmOiBFbGVtZW50UmVmKSB7IH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgaWYgKGNoYW5nZXNbJ25jVXJsJ10pIHtcclxuICAgICAgdGhpcy5yZW5kZXJFeGNlbERvY3VtZW50KCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBhc3luYyByZW5kZXJFeGNlbERvY3VtZW50KCkge1xyXG4gICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCBmZXRjaCh0aGlzLm5jVXJsKTtcclxuICAgIGNvbnN0IGJsb2IgPSBhd2FpdCByZXNwb25zZS5ibG9iKCk7XHJcbiAgICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpO1xyXG4gICAgLy/pgJrov4dyZWFkQXNBcnJheUJ1ZmZlcuWwhmJsb2LovazmjaLkuLpBcnJheUJ1ZmZlcuWvuVxyXG4gICAgcmVhZGVyLnJlYWRBc0FycmF5QnVmZmVyKGJsb2IpO1xyXG4gICAgcmVhZGVyLm9ubG9hZCA9IChldmVudCkgPT4ge1xyXG4gICAgICAvLyDor7vlj5ZBcnJheUJ1ZmZlcuaVsOaNruWPmOaIkFVpbnQ4QXJyYXlcclxuICAgICAgY29uc3QgZGF0YSA9IG5ldyBVaW50OEFycmF5KGV2ZW50LnRhcmdldD8ucmVzdWx0IGFzIEFycmF5QnVmZmVyKTtcclxuICAgICAgLy8g6L+Z6YeM55qEZGF0YemHjOmdoueahOexu+Wei+WSjOWQjumdoueahHR5cGXnsbvlnovopoHlr7nlupRcclxuICAgICAgY29uc3Qgd29ya2Jvb2sgPSBYTFNYLnJlYWQoZGF0YSwgeyB0eXBlOiBcImFycmF5XCIgfSk7XHJcbiAgICAgIGNvbnN0IHNoZWV0TmFtZXMgPSB3b3JrYm9vay5TaGVldE5hbWVzOyAvLyDlt6XkvZzooajlkI3np7BcclxuICAgICAgbGV0IGh0bWxBcnJheSA9IFtdO1xyXG4gICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHNoZWV0TmFtZXMubGVuZ3RoOyBpKyspIHtcclxuICAgICAgICAvLyB2YXIgZXhjZWxEYXRhID0gWExTWC51dGlscy5zaGVldF90b19qc29uKHdvcmtzaGVldCk7IC8vSlNPTlxyXG4gICAgICAgIGNvbnN0IHdvcmtzaGVldCA9IHdvcmtib29rLlNoZWV0c1tzaGVldE5hbWVzW2ldXTtcclxuICAgICAgICBpZiAodGhpcy5uY1NoZWV0TmFtZSkge1xyXG4gICAgICAgICAgaHRtbEFycmF5LnB1c2goYDxoMj4ke3NoZWV0TmFtZXNbaV19PC9oMj5gKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgaHRtbEFycmF5LnB1c2goWExTWC51dGlscy5zaGVldF90b19odG1sKHdvcmtzaGVldCkpO1xyXG4gICAgICB9XHJcbiAgICAgIGNvbnN0IGNvbnRhaW5lciA9IHRoaXMuZWxlUmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignI2V4Y2VsLWNvbnRhaW5lcicpO1xyXG4gICAgICBjb250YWluZXIuaW5uZXJIVE1MID0gaHRtbEFycmF5LmpvaW4oJycpO1xyXG4gICAgfTtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgaWQ9XCJleGNlbC1jb250YWluZXJcIj48L2Rpdj5cbiJdfQ==