platform-bi-web/src/components/dashboardDesigner/layout.jsx

import React from 'react'
import { connect } from 'dva'
import { Icon, Layout, Spin } from 'antd'
import './layout.less'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import DashboardDesignerHeader from './header'
import DashboardDesignerContent from './content'
const { Header, Content } = Layout


class DashboardDesigner extends React.Component {

    componentDidMount() {
        const { dispatch } = this.props;
        const { code } = this.props.match.params;
        dispatch({ type: 'dashboardDesigner/reset' });
        dispatch({ type: 'chart/fetchList' });
        if(code !== 'create') {
            dispatch({ type: 'dashboard/remoteDetail', code: code });
        }
    }


    saveToPNG = (element) => {
        html2canvas(element).then(function(canvas) {
                var pageData = canvas.toDataURL('image/png', 1.0);

                //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
                var pdf = new jsPDF('', 'pt', 'a4');

                //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
                pdf.addImage(pageData, 'PNG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                pdf.save('stone.pdf');
        });
    }

    render() {
        const { loading } = this.props;
        return <Layout className='dashboarddesigner-layout'>
            <Header>
                <DashboardDesignerHeader />
            </Header>
            <Content style={{ height: 0 }}>
                <DashboardDesignerContent />
            </Content>
            <div style={{ display: loading ? 'block' : 'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)' }}>
                <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />}/>
            </div>
        </Layout>
    }

}

export default connect()(DashboardDesigner)