qt-public-ui/es/ExportPic/index.js

新设计规范下业务组件库

/**
 * 前端导出
 * 支持类型：
 *  模型组件：指标矩阵模型、金字塔模型
 *  图表组件：线图、柱图
 * 注：
 *  1、dom结构匹配严格，目前仅支持QT看板(单个指标模块)
 *  2、指标卡趋势图：点击导出后，导出组件加载，导致整个指标模块重新渲染，趋势图数据重新加载，导出组件获取dom时，图表数据还没加载完成，导致拿不到canvas
 */
import React, { useEffect, useState, useContext } from 'react';
import html2canvas from 'html2canvas';
import { isArray } from 'lodash';
import globalContext from '../UmProvider/globalContext';
import { i18n as defaultI18n } from '../utils';
var scale = 2;
var ExportPic = function ExportPic(props) {
  var gContext = useContext(globalContext);
  var i18n = gContext.i18n || defaultI18n;
  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 = useState(false),
    canvasPic = _useState[0],
    setSanvasPic = _useState[1];
  var _useState2 = useState(0),
    scaleWidth = _useState2[0],
    setScaleWidth = _useState2[1];
  var getDom = function getDom() {
    var domWidth = 0;
    var scaleContent = document.getElementById("scaleContent_" + 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 = 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 = domWidth + "px";
    }

    // 处理canvas图表不重新加载问题
    if (canvasLength.length > 0) {
      // 获取canvas转成图片
      var canvasDom = htmlDom === null || htmlDom === void 0 ? void 0 : htmlDom.getElementsByTagName('canvas')[0].parentNode.parentNode;
      html2canvas(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) {
    html2canvas(scaleContent, {
      scale: scale,
      logging: false,
      useCORS: true,
      allowTaint: true,
      // canvas: document.querySelector("canvas"),
      width: exportPicWidth || scaleWidth,
      height: scaleContent.scrollHeight,
      ignoreElements: function ignoreElements(element) {
        if (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 ? exportPicName + ".jpg" : '导出图片.jpg');
      alink.click();
      picLoad(false);
      setSanvasPic(false);
    });
  };
  useEffect(function () {
    if (downPic) {
      getDom();
    }
  }, [downPic]);
  useEffect(function () {
    if (canvasPic) {
      getImg(document.getElementById("scaleContent_" + exportClassNameNum));
    }
  }, [canvasPic]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      overflow: 'auto',
      width: '1px',
      height: '1px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    id: "scaleContent_" + exportClassNameNum,
    style: {
      padding: '30px'
    }
  }));
};
ExportPic.displayName = 'ExportPic';
export default ExportPic;