zcy-antd/lib/print/print.js

An enterprise-class UI design language and React-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

var Print = function (_Component) {
  _inherits(Print, _Component);

  function Print(props) {
    _classCallCheck(this, Print);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.printFrame = function (frameWindow, content) {
      return new Promise(function (resolve, reject) {
        try {
          frameWindow = frameWindow.contentWindow || frameWindow.contentDocument || frameWindow;
          var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
          if (_this.props.doctype) {
            wdoc.write(_this.props.doctype);
          }
          wdoc.write(content);
          wdoc.close();

          setTimeout(function () {
            // Fix for IE : Allow it to render the iframe
            frameWindow.focus();
            try {
              // Fix for IE11 - printng the whole page instead of the iframe content
              if (!frameWindow.document.execCommand('print', false, null)) {
                // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
                frameWindow.print();
              }
            } catch (e) {
              frameWindow.print();
            }
            frameWindow.close();
            resolve();
          }, _this.props.timeout);
        } catch (err) {
          reject(err);
        }
      });
    };

    _this.printContentInIFrame = function (content) {
      var frameWindow = _this.refs.printIframe;
      _this.printFrame(frameWindow, content).then(function () {
        setTimeout(function () {
          // Wait for IE
          // Destroy the iframe if created here
          _this.setState({
            iframeShow: false,
            inPrint: false
          });
        }, 100);
      }, function (err) {
        // Use the pop-up method if iframe fails for some reason
        console.error('Failed to print from iframe', err);
        _this.printContentInNewWindow(content);
      });
    };

    _this.printContentInNewWindow = function (content) {
      var frameWindow = window.open();
      _this.printFrame(frameWindow, content).then(function () {
        _this.setState({
          iframeShow: false,
          inPrint: false
        });
        console.log('success');
      });
    };

    _this.printContent = function () {
      var content = _this.hanlePrintContent();
      if (_this.props.iframe) {
        try {
          _this.setState({
            iframeShow: _this.props.iframe
          }, function () {
            _this.printContentInIFrame(content);
          });
        } catch (e) {
          // Use the pop-up method if iframe fails for some reason
          console.error('Failed to print from iframe', e.stack, e.message);
          _this.printContentInNewWindow(content);
        }
      } else {
        // Use a new window for printing
        _this.printContentInNewWindow(content);
      }
    };

    _this.hanlePrintContent = function () {
      var style = void 0;
      var link = void 0;
      var meta = void 0;
      var title = void 0;
      var content = _this.convertStrToDom(_this.props.printTmpl);

      if (_this.props.globalStyles) {
        style = document.querySelectorAll('style');
        link = document.querySelectorAll('link');
        meta = document.querySelectorAll('meta');
        title = document.querySelector('title');
      } else if (_this.props.mediaPrint) {
        // Apply the media-print stylesheet
        link = document.querySelectorAll('link[media=print]');
      }

      if (_this.props.noPrintSelector) {
        var child = content.querySelectorAll(_this.props.noPrintSelector);
        Array.prototype.map.call(child, function (elem) {
          elem.parentNode.removeChild(elem);
        });
      }
      _this.appendDomList(content, title);
      _this.appendDomList(content, meta);
      _this.appendDomList(content, link);
      _this.appendDomList(content, style);
      if (_this.props.printTmplTitle) {
        var ctitle = content.querySelector('title');
        var text = document.createTextNode(_this.props.printTmplTitle);
        if (!ctitle) {
          var newTitle = document.createElement('title');
          content.appendChild(newTitle);
        }
        content.querySelector('title').append(text);
      }

      return content.innerHTML;
    };

    _this.appendDomList = function (content, nodelist) {
      if (!nodelist) {
        return;
      }
      Array.prototype.map.call(nodelist, function (elem) {
        content.appendChild(elem.cloneNode(true));
      });
    };

    _this.convertStrToDom = function (domStr) {
      var wrap = document.createElement('div');
      wrap.innerHTML = domStr;
      return wrap;
    };

    _this.isPrintDataComplete = function () {
      _this.setState({
        inPrint: true
      });
      if (_this.props.printTmplState) {
        _this.printContent();
      } else {
        _this.props.hanlerPrintData();
      }
    };

    _this.state = {
      iframeShow: false,
      iframeStyle: {
        position: 'absolute',
        top: -999,
        left: -999,
        width: 0,
        height: 0,
        border: 0
      },
      inPrint: false
    };
    return _this;
  }
  /**
   * 数据更新时触发函数
   * @param {object} prevProps
   */


  Print.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.printTmplState !== prevProps.printTmplState && !!this.props.printTmplState && this.state.inPrint) {
      this.printContent();
    }
  };
  /**
   * 打印方法
   * @param {Node} frameWindow - 调用打印的窗口
   * @param {string} content - 打印内容的dom string片段
   * @return {Promise}
   */

  /**
   * 使用iframe的形式打印内容
   * @param {string} content - 打印内容的dom string片段
   */

  /**
   * 使用新开窗口的形式打印内容
   * @param {string} content - 打印内容的dom string片段
   */

  /**
   * 按钮触发函数，打印内容，根据配置使用不同的方式触发打印函数
   */

  /**
   * 处理打印内容
   * @return {String}
   */

  /**
   * 向需要打印的dom节点内添加title, meta, link, style等
   * @param {Node} content
   * @param {Node} nodelist
   */

  /**
   * 转换dom字符串片段位标准dom节点
   * @param {String} domStr - dom的字符串片段
   */

  /**
   * 确认打印数据是否完成,调用不同的方式
   */


  Print.prototype.render = function render() {
    var btn = _react2["default"].cloneElement(this.props.children, {
      onClick: this.isPrintDataComplete
    });
    return _react2["default"].createElement(
      'div',
      { className: 'zcy-print-wrap' },
      this.state.iframeShow && _react2["default"].createElement('iframe', { ref: 'printIframe', style: _extends({}, this.state.iframeStyle) }),
      btn
    );
  };

  return Print;
}(_react.Component);

exports["default"] = Print;


Print.propTypes = {
  globalStyles: _react2["default"].PropTypes.bool,
  mediaPrint: _react2["default"].PropTypes.bool,
  noPrintSelector: _react2["default"].PropTypes.string,
  manuallyCopyFormValues: _react2["default"].PropTypes.bool,
  timeout: _react2["default"].PropTypes.number,
  iframe: _react2["default"].PropTypes.bool,
  printTmpl: _react2["default"].PropTypes.string.isRequired,
  printTmplState: _react2["default"].PropTypes.bool.isRequired,
  printTmplTitle: _react2["default"].PropTypes.string,
  hanlerPrintData: _react2["default"].PropTypes.func
};

Print.defaultProps = {
  globalStyles: true,
  mediaPrint: false,
  stylesheet: null,
  noPrintSelector: '.no-print',
  iframe: true,
  doctype: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
  timeout: 250,
  printTmplTitle: null,
  //  以下属性 开发中
  append: null,
  prepend: null,
  manuallyCopyFormValues: true
};
module.exports = exports['default'];