写在前面:由于echarts图表是动态的数据,直接打印会丢失图表数据,所以打印echarts时会先将echarts图表转换成img图片,再进行打印。
*当多次循环调用echarts图表时,请注意要动态的修改绑定div的id,不要让多个echarts图表div的id相同。
一、先创建打印页面
创建PrintBox文件夹,在其中新建index.js文件以及styles.less文件,BarChart与PieChart是自己写的图表组件。(一会给你们看这俩页面的代码)
index.js页面
小伙伴们,我这里是已经通过接口得到了要显示的数据,你们没有数据的可以自己模拟假的数据进行效果的实现。
import React from 'react';
import styles from './styles.less';
import axios from 'axios'
import {
Button } from 'antd';
import x from "@/assets/bird/x.png"
import IPConfig from '@/constants/IPConfig'; // 接口的ip及端口地址
import BarChart from './BarChart/index'
import PieChart from './PieChart/index'
class PrintBox extends React.Component {
constructor(props) {
super(props);
this.state = {
display: 'none',
month: '',
data: [],
};
}
//渲染前调用
componentWillMount() {
}
//渲染后调用
componentDidMount() {
this.printBtn()
}
//打印按钮方法
printBtn() {
let api = '/bird-web/statistics/report/'
let myDate = new Date()
let tYear = myDate.getFullYear();
let tMonth = myDate.getMonth();
let changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
let lastMoth = tYear + '-' + tMonth;
axios({
url: IPConfig.printUrl + api + lastMoth, //请求的接口地址
method: 'get',
}).then(res => {
console.log(res);
let data = res.data.res
this.setState({
display:'block',//打印区域变为块状元素显示出来
month: changeNum[tMonth - 1],
data: data,
})
}).catch(err => {
console.log('失败', err)
}).then(() => {
// 总会执行
})
}
// 关闭窗口按钮
printClose() {
this.setState({
display:'none'//打印区域不显示
})
}
//确认打印
printOk() {
//获取打印区域
const print = document.getElementById('printDiv').innerHTML;
// 把当前页面替换成要打印的内容
document.body.innerHTML = print;
// 打印
window.print();
// 刷新页面
window.location.reload();
}
render() {
let {
Cordonarea, TrackPlaybackVal, radarVal } = this.state;
return (<React.Fragment>
<div className={
styles.printBtnBox}>
{
/* 打印按钮 */}
<Button className={
styles.printBtn} onClick={
this.printBtn.bind(this)} type="primary" shape="round" size="large">
打印报告表单
</Button>
</div>
<div className={
styles.printShadow} style={
{
display: this.state.display }}>
</div>
<div className={
styles.printAll} style={
{
display: this.state.display }}>
<div className={
styles.printTop}>