qt-public-ui
Version:
新设计规范下业务组件库
156 lines (152 loc) • 6.79 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _html2canvas = _interopRequireDefault(require("html2canvas"));
var _lodash = require("lodash");
var _globalContext = _interopRequireDefault(require("../UmProvider/globalContext"));
var _utils = require("../utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
* 前端导出
* 支持类型：
* 模型组件：指标矩阵模型、金字塔模型
* 图表组件：线图、柱图
* 注：
* 1、dom结构匹配严格，目前仅支持QT看板(单个指标模块)
* 2、指标卡趋势图：点击导出后，导出组件加载，导致整个指标模块重新渲染，趋势图数据重新加载，导出组件获取dom时，图表数据还没加载完成，导致拿不到canvas
*/
var scale = 2;
var ExportPic = function ExportPic(props) {
var gContext = (0, _react.useContext)(_globalContext["default"]);
var i18n = gContext.i18n || _utils.i18n;
var downPic = props.downPic,
exportClassName = props.exportClassName,
exportClassNameNum = props.exportClassNameNum,
exportPicWidth = props.exportPicWidth,
picLoad = props.picLoad,
exportPicName = props.exportPicName,
_props$filterClassNam = props.filterClassName,
filterClassName = _props$filterClassNam === void 0 ? [] : _props$filterClassNam;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
canvasPic = _useState2[0],
setSanvasPic = _useState2[1];
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
scaleWidth = _useState4[0],
setScaleWidth = _useState4[1];
var getDom = function getDom() {
var domWidth = 0;
var scaleContent = document.getElementById("scaleContent_".concat(exportClassNameNum));
var htmlDom = document.getElementsByClassName(exportClassName)[exportClassNameNum];
var canvasLength = htmlDom === null || htmlDom === void 0 ? void 0 : htmlDom.getElementsByTagName('canvas');
scaleContent.innerHTML = htmlDom.innerHTML;
// 获取看板宽度和高度
if (exportPicWidth) {
// 传入宽度
scaleContent.style.width = "".concat(exportPicWidth, "px");
} else {
// 获取最大宽度
var widthAry = [];
var tagNames = scaleContent === null || scaleContent === void 0 ? void 0 : scaleContent.getElementsByTagName('*');
if (tagNames) {
for (var i = 0, l = tagNames.length; i < l; ++i) {
if (tagNames[i].scrollWidth) {
widthAry.push(tagNames[i].scrollWidth);
}
}
}
domWidth = Math.max.apply(Math, widthAry);
scaleContent.style.width = "".concat(domWidth, "px");
}
// 处理canvas图表不重新加载问题
if (canvasLength.length > 0) {
// 获取canvas转成图片
var canvasDom = htmlDom === null || htmlDom === void 0 ? void 0 : htmlDom.getElementsByTagName('canvas')[0].parentNode.parentNode;
(0, _html2canvas["default"])(canvasDom, {
scale: scale,
logging: false,
useCORS: true,
allowTaint: true
}).then(function (canvas) {
var dataImg = new Image();
dataImg.src = canvas.toDataURL('image/png');
dataImg.style.width = '100%';
scaleContent.appendChild(dataImg); // 图片追加到dom
setSanvasPic(true);
});
// 删除复制div中的canvas div
var deleCanvasDom = scaleContent === null || scaleContent === void 0 ? void 0 : scaleContent.getElementsByTagName('canvas')[0].parentNode.parentNode;
deleCanvasDom && deleCanvasDom.parentNode.removeChild(deleCanvasDom);
} else {
setSanvasPic(true);
}
// 删除复制div中的指标操作弹框(特殊定制)
var deleIndicatorDom = scaleContent.getElementsByClassName('indicator-action')[0];
deleIndicatorDom && deleIndicatorDom.parentNode.removeChild(deleIndicatorDom);
setScaleWidth(domWidth);
};
var getImg = function getImg(scaleContent) {
(0, _html2canvas["default"])(scaleContent, {
scale: scale,
logging: false,
useCORS: true,
allowTaint: true,
// canvas: document.querySelector("canvas"),
width: exportPicWidth || scaleWidth,
height: scaleContent.scrollHeight,
ignoreElements: function ignoreElements(element) {
if ((0, _lodash.isArray)(filterClassName) && filterClassName.length > 0) {
filterClassName.map(function (c) {
if (element.className === c) {
return true;
}
return false;
});
}
return false;
}
}).then(function (canvas) {
// toImage
var dataImg = new Image();
dataImg.src = canvas.toDataURL('image/png');
var alink = document.createElement('a');
alink.href = dataImg.src;
alink.download = i18n.get(exportPicName ? "".concat(exportPicName, ".jpg") : '导出图片.jpg');
alink.click();
picLoad(false);
setSanvasPic(false);
});
};
(0, _react.useEffect)(function () {
if (downPic) {
getDom();
}
}, [downPic]);
(0, _react.useEffect)(function () {
if (canvasPic) {
getImg(document.getElementById("scaleContent_".concat(exportClassNameNum)));
}
}, [canvasPic]);
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
overflow: 'auto',
width: '1px',
height: '1px'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
id: "scaleContent_".concat(exportClassNameNum),
style: {
padding: '30px'
}
}));
};
ExportPic.displayName = 'ExportPic';
var _default = exports["default"] = ExportPic;