ng-cw-v12
Version:
Angular UI component library
62 lines • 8.97 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;
this.ncUrl = '';
this.sheetNameMode = false;
}
set ncSheetName(value) {
this.sheetNameMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
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.sheetNameMode) {
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhjZWwtdmlld2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvZXhjZWwtdmlld2VyL2V4Y2VsLXZpZXdlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2V4Y2VsLXZpZXdlci9leGNlbC12aWV3ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUN2RixPQUFPLEtBQUssSUFBSSxNQUFNLGVBQWUsQ0FBQzs7QUFPdEMsTUFBTSxPQUFPLG9CQUFvQjtJQU8vQixZQUFvQixNQUFrQjtRQUFsQixXQUFNLEdBQU4sTUFBTSxDQUFZO1FBTjdCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFJNUIsa0JBQWEsR0FBWSxLQUFLLENBQUM7SUFFVyxDQUFDO0lBTDNDLElBQWEsV0FBVyxDQUFDLEtBQXVCO1FBQzlDLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxLQUFLLElBQUksSUFBSSxLQUFLLEtBQUssU0FBUyxJQUFJLEtBQUssS0FBSyxLQUFLLElBQUksS0FBSyxLQUFLLE9BQU8sQ0FBQztJQUNyRyxDQUFDO0lBS0QsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1NBQzVCO0lBQ0gsQ0FBQztJQUVLLG1CQUFtQjs7WUFDdkIsTUFBTSxRQUFRLEdBQUcsTUFBTSxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3pDLE1BQU0sSUFBSSxHQUFHLE1BQU0sUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ25DLE1BQU0sTUFBTSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7WUFDaEMseUNBQXlDO1lBQ3pDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUMvQixNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsS0FBSyxFQUFFLEVBQUU7O2dCQUN4Qiw4QkFBOEI7Z0JBQzlCLE1BQU0sSUFBSSxHQUFHLElBQUksVUFBVSxDQUFDLE1BQUEsS0FBSyxDQUFDLE1BQU0sMENBQUUsTUFBcUIsQ0FBQyxDQUFDO2dCQUNqRSw0QkFBNEI7Z0JBQzVCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQUM7Z0JBQ3BELE1BQU0sVUFBVSxHQUFHLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxRQUFRO2dCQUNoRCxJQUFJLFNBQVMsR0FBRyxFQUFFLENBQUM7Z0JBQ25CLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO29CQUMxQyw4REFBOEQ7b0JBQzlELE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7b0JBQ2pELElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTt3QkFDdEIsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLFVBQVUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7cUJBQzdDO29CQUNELFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztpQkFDckQ7Z0JBQ0QsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQzlFLFNBQVMsQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUMzQyxDQUFDLENBQUM7UUFDSixDQUFDO0tBQUE7O2lIQXZDVSxvQkFBb0I7cUdBQXBCLG9CQUFvQixvSUNSakMsc0NBQ0E7MkZET2Esb0JBQW9CO2tCQUxoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFdBQVcsRUFBRSwrQkFBK0I7b0JBQzVDLFNBQVMsRUFBRSxDQUFDLCtCQUErQixDQUFDO2lCQUM3QztpR0FFVSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ08sV0FBVztzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0ICogYXMgWExTWCBmcm9tICd4bHN4LWpzLXN0eWxlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmMtZXhjZWwtdmlld2VyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2V4Y2VsLXZpZXdlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2V4Y2VsLXZpZXdlci5jb21wb25lbnQubGVzcyddXG59KVxuZXhwb3J0IGNsYXNzIEV4Y2VsVmlld2VyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgbmNVcmw6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBzZXQgbmNTaGVldE5hbWUodmFsdWU6IGJvb2xlYW4gfCBzdHJpbmcpIHtcbiAgICB0aGlzLnNoZWV0TmFtZU1vZGUgPSB2YWx1ZSAhPT0gbnVsbCAmJiB2YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHZhbHVlICE9PSBmYWxzZSAmJiB2YWx1ZSAhPT0gJ2ZhbHNlJztcbiAgfVxuICBzaGVldE5hbWVNb2RlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVSZWY6IEVsZW1lbnRSZWYpIHsgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1snbmNVcmwnXSkge1xuICAgICAgdGhpcy5yZW5kZXJFeGNlbERvY3VtZW50KCk7XG4gICAgfVxuICB9XG5cbiAgYXN5bmMgcmVuZGVyRXhjZWxEb2N1bWVudCgpIHtcbiAgICBjb25zdCByZXNwb25zZSA9IGF3YWl0IGZldGNoKHRoaXMubmNVcmwpO1xuICAgIGNvbnN0IGJsb2IgPSBhd2FpdCByZXNwb25zZS5ibG9iKCk7XG4gICAgY29uc3QgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTtcbiAgICAvL+mAmui/h3JlYWRBc0FycmF5QnVmZmVy5bCGYmxvYui9rOaNouS4ukFycmF5QnVmZmVy5a+5XG4gICAgcmVhZGVyLnJlYWRBc0FycmF5QnVmZmVyKGJsb2IpO1xuICAgIHJlYWRlci5vbmxvYWQgPSAoZXZlbnQpID0+IHtcbiAgICAgIC8vIOivu+WPlkFycmF5QnVmZmVy5pWw5o2u5Y+Y5oiQVWludDhBcnJheVxuICAgICAgY29uc3QgZGF0YSA9IG5ldyBVaW50OEFycmF5KGV2ZW50LnRhcmdldD8ucmVzdWx0IGFzIEFycmF5QnVmZmVyKTtcbiAgICAgIC8vIOi/memHjOeahGRhdGHph4zpnaLnmoTnsbvlnovlkozlkI7pnaLnmoR0eXBl57G75Z6L6KaB5a+55bqUXG4gICAgICBjb25zdCB3b3JrYm9vayA9IFhMU1gucmVhZChkYXRhLCB7IHR5cGU6IFwiYXJyYXlcIiB9KTtcbiAgICAgIGNvbnN0IHNoZWV0TmFtZXMgPSB3b3JrYm9vay5TaGVldE5hbWVzOyAvLyDlt6XkvZzooajlkI3np7BcbiAgICAgIGxldCBodG1sQXJyYXkgPSBbXTtcbiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgc2hlZXROYW1lcy5sZW5ndGg7IGkrKykge1xuICAgICAgICAvLyB2YXIgZXhjZWxEYXRhID0gWExTWC51dGlscy5zaGVldF90b19qc29uKHdvcmtzaGVldCk7IC8vSlNPTlxuICAgICAgICBjb25zdCB3b3Jrc2hlZXQgPSB3b3JrYm9vay5TaGVldHNbc2hlZXROYW1lc1tpXV07XG4gICAgICAgIGlmICh0aGlzLnNoZWV0TmFtZU1vZGUpIHtcbiAgICAgICAgICBodG1sQXJyYXkucHVzaChgPGgyPiR7c2hlZXROYW1lc1tpXX08L2gyPmApO1xuICAgICAgICB9XG4gICAgICAgIGh0bWxBcnJheS5wdXNoKFhMU1gudXRpbHMuc2hlZXRfdG9faHRtbCh3b3Jrc2hlZXQpKTtcbiAgICAgIH1cbiAgICAgIGNvbnN0IGNvbnRhaW5lciA9IHRoaXMuZWxlUmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignI2V4Y2VsLWNvbnRhaW5lcicpO1xuICAgICAgY29udGFpbmVyLmlubmVySFRNTCA9IGh0bWxBcnJheS5qb2luKCcnKTtcbiAgICB9O1xuICB9XG5cbn1cbiIsIjxkaXYgaWQ9XCJleGNlbC1jb250YWluZXJcIj48L2Rpdj5cbiJdfQ==