| | |
|---|
| | | import React, {Component} from 'react' |
|---|
| | | import PropTypes from 'prop-types' |
|---|
| | | import { is, fromJS } from 'immutable' |
|---|
| | | import { Col, notification, Button, Row } from 'antd' |
|---|
| | | import { Col, notification, Row } from 'antd' |
|---|
| | | |
|---|
| | | import Api from '@/api' |
|---|
| | | import asyncComponent from '@/utils/asyncComponent' |
|---|
| | |
|---|
| | | |
|---|
| | | state = { |
|---|
| | | mainSearch: [], |
|---|
| | | printing: false, |
|---|
| | | // printing: false, |
|---|
| | | data: null |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | canvasToImage(canvas) { |
|---|
| | | let image = new Image() |
|---|
| | | image.src = canvas.toDataURL('image/jpg') |
|---|
| | | image.style = 'width:100%;height:100%;position:absolute;z-index:1;left:0px;top:0px;' |
|---|
| | | return image |
|---|
| | | } |
|---|
| | | |
|---|
| | | print = () => { |
|---|
| | | const { config } = this.props |
|---|
| | | const { printing } = this.state |
|---|
| | | |
|---|
| | | if (printing) return |
|---|
| | | this.setState({printing: true}) |
|---|
| | | |
|---|
| | | let qrcodes = document.getElementsByClassName('qrcode-box') |
|---|
| | | |
|---|
| | | for (let i = 0; i < qrcodes.length; i++) { |
|---|
| | | let canvas = qrcodes[i].getElementsByTagName('canvas')[0] |
|---|
| | | |
|---|
| | | if (canvas) { |
|---|
| | | let img = this.canvasToImage(canvas) |
|---|
| | | |
|---|
| | | canvas.remove() |
|---|
| | | qrcodes[i].append(img) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let pageSize = ['A4', 'A3', 'A5'].includes(config.setting.pageSize) ? config.setting.pageSize : 'A4' |
|---|
| | | let pageLayout = config.setting.pageLayout !== 'horizontal' ? 'vertical' : 'horizontal' |
|---|
| | | let hides = config.setting.hide || [] |
|---|
| | | |
|---|
| | | let pageParam = { |
|---|
| | | A4: { |
|---|
| | | vertical: 980, |
|---|
| | | horizontal: 1200, |
|---|
| | | }, |
|---|
| | | A3: { |
|---|
| | | vertical: 1200, |
|---|
| | | horizontal: 1600, |
|---|
| | | }, |
|---|
| | | A5: { |
|---|
| | | vertical: 700, |
|---|
| | | horizontal: 1000, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let width = pageParam[pageSize][pageLayout] |
|---|
| | | |
|---|
| | | try { |
|---|
| | | let jubuData = document.getElementById(config.uuid).innerHTML |
|---|
| | | |
|---|
| | | let iframe = document.createElement('IFRAME') |
|---|
| | | let linkList = document.getElementsByTagName('link') // 获取父窗口link标签对象列表 |
|---|
| | | let styleList = document.getElementsByTagName('style') // 获取父窗口style标签对象列表 |
|---|
| | | |
|---|
| | | document.body.appendChild(iframe) |
|---|
| | | let doc = iframe.contentWindow.document |
|---|
| | | |
|---|
| | | doc.open() |
|---|
| | | doc.write(`<!DOCTYPE html><html lang="en"><head>`) |
|---|
| | | for (let i = 0;i < linkList.length;i++) { |
|---|
| | | if (linkList[i].type === 'text/css') { |
|---|
| | | doc.write(`<LINK rel="stylesheet" type="text/css" href="${linkList[i].href}">`) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | doc.write(`<style>body{width: ${width}px!important;} *{border-style: solid;border-width: 0;} .print-button{display: none!important;} ${hides.includes('search') ? '.top-search{display: none!important;}' : ''} ${hides.includes('button') ? '.ant-btn{opacity: 0!important;}' : ''}</style>`) |
|---|
| | | for (let i = 0;i < styleList.length;i++) { |
|---|
| | | doc.write('<style>' + styleList[i].innerHTML + '</style>') |
|---|
| | | } |
|---|
| | | doc.write(`</head><body>`) |
|---|
| | | doc.write(jubuData) |
|---|
| | | doc.write(`</body></html>`) |
|---|
| | | doc.close() |
|---|
| | | |
|---|
| | | setTimeout(() => { |
|---|
| | | iframe.contentWindow.focus() |
|---|
| | | iframe.contentWindow.print() |
|---|
| | | |
|---|
| | | document.body.removeChild(iframe) |
|---|
| | | |
|---|
| | | this.setState({printing: false}) |
|---|
| | | }, 500) |
|---|
| | | } catch (e) { |
|---|
| | | this.setState({printing: false}) |
|---|
| | | notification.warning({ |
|---|
| | | top: 92, |
|---|
| | | message: '打印异常！', |
|---|
| | | duration: 5 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | render() { |
|---|
| | | const { config } = this.props |
|---|
| | | const { printing } = this.state |
|---|
| | | |
|---|
| | | if (!config.components || config.components.length === 0) return (<div style={config.style}></div>) |
|---|
| | | |
|---|
| | |
|---|
| | | {config.setting && config.setting.title ? <div className="group-header" style={config.headerStyle}> |
|---|
| | | <span className="title">{config.setting.title}</span> |
|---|
| | | </div> : null} |
|---|
| | | {config.setting && config.setting.print === 'true' ? <Button className="print-button" icon="printer" loading={printing} onClick={this.print}></Button> : null} |
|---|
| | | <Row className="component-wrap">{this.getComponents()}</Row> |
|---|
| | | </div> |
|---|
| | | ) |
|---|
