fastlion-amis
Version:
一种MIS页面生成工具
334 lines (333 loc) • 16.7 kB
JavaScript
"use strict";
/**
* office 文件预览
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.OfficeViewerRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var factory_1 = require("../factory");
var api_1 = require("../utils/api");
var tpl_1 = require("../utils/tpl");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var helper_1 = require("../utils/helper");
var components_1 = require("../components");
var Scoped_1 = require("../Scoped");
var OfficeViewer = /** @class */ (function (_super) {
tslib_1.__extends(OfficeViewer, _super);
function OfficeViewer(props) {
var _this = _super.call(this, props) || this;
_this.rootElement = react_1.default.createRef();
_this.state = {
loading: false
};
return _this;
}
OfficeViewer.prototype.componentDidMount = function () {
var _a;
if ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.current) {
this.renderWord();
}
};
OfficeViewer.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
var _a, _b;
// 避免 loading 时更新
if (this.state.loading) {
return;
}
var props = this.props;
// 比较2次传入的src，如果不同，则将走重新渲染逻辑
if (props.src !== prevProps.src || (JSON.stringify(prevProps.excelOptions) !==
JSON.stringify(props.excelOptions))) {
this.document = null;
this.renderWord();
}
if ((0, api_1.isApiOutdated)(prevProps.src, props.src, prevProps.data, props.data)) {
this.fetchWord().then(function () {
_this.renderWord();
});
}
if (props.name) {
if (prevProps.data[props.name] !== props.data[props.name]) {
this.renderWord();
}
}
if (JSON.stringify(prevProps.wordOptions) !==
JSON.stringify(props.wordOptions) ||
prevProps.display !== props.display) {
this.renderWord();
}
if ((_a = props.wordOptions) === null || _a === void 0 ? void 0 : _a.enableVar) {
if (props.trackExpression &&
(0, tpl_1.filter)(props.trackExpression, props.data) !==
(0, tpl_1.filter)(prevProps.trackExpression, prevProps.data)) {
this.renderWord();
}
else {
// 默认只更新变量提升性能
(_b = this.office) === null || _b === void 0 ? void 0 : _b.updateVariable();
}
}
};
/**
* 接收动作事件
*/
OfficeViewer.prototype.doAction = function (action, data, throwErrors, args) {
var _a, _b;
var actionType = action === null || action === void 0 ? void 0 : action.actionType;
if (actionType === 'saveAs') {
(_a = this.office) === null || _a === void 0 ? void 0 : _a.download((args === null || args === void 0 ? void 0 : args.name) || this.fileName);
}
if (actionType === 'print') {
(_b = this.office) === null || _b === void 0 ? void 0 : _b.print();
}
};
/**
* 执行变量替换
*/
OfficeViewer.prototype.evalVar = function (text, data) {
var localData = this.props.data;
return (0, tpl_builtin_1.resolveVariableAndFilter)('${' + text + '}', (0, helper_1.createObject)(data, localData), '| raw');
};
OfficeViewer.prototype.renderWord = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, src, name;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, src = _a.src, name = _a.name;
if (!src) return [3 /*break*/, 4];
if (!!this.document) return [3 /*break*/, 2];
return [4 /*yield*/, this.fetchWord()];
case 1:
_b.sent();
_b.label = 2;
case 2: return [4 /*yield*/, this.renderRemoteWord()];
case 3:
_b.sent();
return [3 /*break*/, 5];
case 4:
if (name) {
this.renderFormFile();
}
_b.label = 5;
case 5: return [2 /*return*/];
}
});
});
};
OfficeViewer.prototype.fetchWord = function () {
var _a;
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _b, env, src, data, __, finalSrc, resolveSrc, response, arrayBuffer, error_1;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
_b = this.props, env = _b.env, src = _b.src, data = _b.data, __ = _b.translate;
resolveSrc = src
? (0, tpl_builtin_1.resolveVariableAndFilter)(src, data, '| raw')
: undefined;
if (typeof resolveSrc === 'string') {
finalSrc = resolveSrc;
this.fileName = finalSrc.split('/').pop();
}
else if (typeof resolveSrc === 'object' &&
typeof resolveSrc.value === 'string') {
finalSrc = resolveSrc.value;
this.fileName = resolveSrc.name || finalSrc.split('/').pop();
}
if (!finalSrc) {
console.warn('file src is empty');
return [2 /*return*/];
}
this.finalSrc = finalSrc;
this.setState({
loading: true
});
_c.label = 1;
case 1:
_c.trys.push([1, 4, 5, 6]);
return [4 /*yield*/, fetch(finalSrc, {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
}
})];
case 2:
response = _c.sent();
return [4 /*yield*/, response.arrayBuffer()];
case 3:
arrayBuffer = _c.sent();
this.document = arrayBuffer;
return [3 /*break*/, 6];
case 4:
error_1 = _c.sent();
// 显示一下报错信息避免没法选中组件
if ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.current) {
this.rootElement.current.innerHTML =
__('loadingFailed') + ' url:' + finalSrc;
}
return [3 /*break*/, 6];
case 5:
this.setState({
loading: false
});
return [7 /*endfinally*/];
case 6: return [2 /*return*/];
}
});
});
};
OfficeViewer.prototype.initOffice = function (officeViewer, file) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, wordOptions, excelOptions, data, __, createOfficeViewer, office;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, wordOptions = _a.wordOptions, excelOptions = _a.excelOptions, data = _a.data, __ = _a.translate;
createOfficeViewer = officeViewer.createOfficeViewer;
return [4 /*yield*/, createOfficeViewer(file || this.document, {}, this.finalSrc)];
case 1:
office = _b.sent();
if (!(office instanceof officeViewer.Word)) return [3 /*break*/, 2];
office.updateOptions(tslib_1.__assign(tslib_1.__assign({}, wordOptions), { data: data, evalVar: this.evalVar.bind(this) }));
return [3 /*break*/, 4];
case 2:
if (!(office instanceof officeViewer.Excel)) return [3 /*break*/, 4];
office.updateOptions(tslib_1.__assign(tslib_1.__assign({}, excelOptions), { data: data, evalVar: this.evalVar.bind(this) }));
return [4 /*yield*/, office.loadExcel()];
case 3:
_b.sent();
_b.label = 4;
case 4: return [2 /*return*/, office];
}
});
});
};
/**
* 渲染远端文件
*/
OfficeViewer.prototype.renderRemoteWord = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, wordOptions, excelOptions, env, src, data, display, __;
var _this = this;
return tslib_1.__generator(this, function (_b) {
_a = this.props, wordOptions = _a.wordOptions, excelOptions = _a.excelOptions, env = _a.env, src = _a.src, data = _a.data, display = _a.display, __ = _a.translate;
if (!this.document) {
return [2 /*return*/];
}
Promise.resolve().then(function () { return new Promise(function(resolve){require(['office-viewer'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (officeViewer) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var office;
var _a, _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0: return [4 /*yield*/, this.initOffice(officeViewer)];
case 1:
office = _c.sent();
if (display !== false) {
office.render((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.current);
}
else if (display === false && ((_b = this.rootElement) === null || _b === void 0 ? void 0 : _b.current)) {
// 设置为 false 后清空
this.rootElement.current.innerHTML = '';
}
this.office = office;
this.setState({
loading: false
});
return [2 /*return*/];
}
});
}); });
return [2 /*return*/];
});
});
};
/**
* 渲染本地文件，用于预览 input-file
*/
OfficeViewer.prototype.renderFormFile = function () {
var _this = this;
this.setState({
loading: true
});
var _a = this.props, wordOptions = _a.wordOptions, name = _a.name, data = _a.data, display = _a.display;
var file = data[name];
if (file instanceof File) {
var reader_1 = new FileReader();
reader_1.onload = function (_e) {
var data = reader_1.result;
Promise.resolve().then(function () { return new Promise(function(resolve){require(['office-viewer'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (officeViewer) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var office;
var _a, _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0: return [4 /*yield*/, this.initOffice(officeViewer, data)];
case 1:
office = _c.sent();
if (display !== false) {
office.render((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.current);
}
else if (display === false && ((_b = this.rootElement) === null || _b === void 0 ? void 0 : _b.current)) {
// 设置为 false 后清空
this.rootElement.current.innerHTML = '';
}
this.office = office;
this.setState({
loading: false
});
return [2 /*return*/];
}
});
}); });
};
reader_1.readAsArrayBuffer(file);
}
else {
this.setState({
loading: false
});
}
};
OfficeViewer.prototype.render = function () {
var _a = this.props, cx = _a.classnames, __ = _a.translate, className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, src = _a.src, name = _a.name, display = _a.display, loadingConfig = _a.loadingConfig, excelOptions = _a.excelOptions, wordOptions = _a.wordOptions;
var height = (wordOptions === null || wordOptions === void 0 ? void 0 : wordOptions.height) || (excelOptions === null || excelOptions === void 0 ? void 0 : excelOptions.height);
return (react_1.default.createElement("div", null,
display !== false && !src && !name && (react_1.default.createElement("svg", { width: "100%", height: "100", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("rect", { x: "0", y: "0", width: "100%", height: "100", style: { fill: '#F7F7F9' } }),
react_1.default.createElement("text", { x: "50%", y: "50%", fontSize: "18", textAnchor: "middle", alignmentBaseline: "middle", fontFamily: "monospace, sans-serif", fill: "#555555" }, "office viewer"))),
react_1.default.createElement("div", { ref: this.rootElement, className: cx('office-viewer', className),
// 配置从最新的配置中获取高度
style: { height: height, lineHeight: height > 0 ? height + 'px' : 'initial' } }),
react_1.default.createElement(components_1.Spinner, { overlay: true, key: "info", show: loading && this.state.loading, loadingConfig: loadingConfig })));
};
return OfficeViewer;
}(react_1.default.Component));
exports.default = OfficeViewer;
var OfficeViewerRenderer = /** @class */ (function (_super) {
tslib_1.__extends(OfficeViewerRenderer, _super);
function OfficeViewerRenderer(props, context) {
var _this = _super.call(this, props) || this;
var scoped = context;
scoped.registerComponent(_this);
return _this;
}
OfficeViewerRenderer.prototype.componentWillUnmount = function () {
var _a;
(_a = _super.prototype.componentWillUnmount) === null || _a === void 0 ? void 0 : _a.call(this);
var scoped = this.context;
scoped.unRegisterComponent(this);
};
var _a;
OfficeViewerRenderer.contextType = Scoped_1.ScopedContext;
OfficeViewerRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'office-viewer'
}),
tslib_1.__metadata("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
], OfficeViewerRenderer);
return OfficeViewerRenderer;
}(OfficeViewer));
exports.OfficeViewerRenderer = OfficeViewerRenderer;
//# sourceMappingURL=./renderers/OfficeViewer.js.map