vue项目中遇到的打印,以及处理重新排版后不显示echarts图片问题。

1. 项目中用到的打印

页面:

css: 控制好宽度一般A4 我调试的是794px多了放不下,小了填不满。当时多页打印的时候,一定要控制好每一个页面内容显示的高度不要超过一个页面,当然根据自己项目来。

由于我的项目是每一个页面固定一个页尾部,所以当显示的时候正常排版显示。但是一旦点击了打印预览需要修改这个区域的css让他固定在每一个页面的底部。

 

js代码,点击打印后执行(如果右键点击打印就会乱,所以给一个打印预览按钮让用户直接点):打印前先给要打印区域排版,这样预览打印的时候就不会乱,只打印要打印的内容。然后延迟调用系统的打印预览后即便用户没有打印,页面已经排好版了 这个时候右键打印也是可以的了。

print(){
        var that = this;
        $('.operatorBox').css({ //从新绘制这块区域让它固定在每一个页面底部
            'position':'fixed',
            'bottom':'15px'
        })//此方法仅限单页
        var div_print = document.getElementById('print-area'); var newstr = div_print.innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = newstr;  // that.showCharts() // console.log(this.imgBase) // 吧charts图表弄成图片,在挨边替换空白图表 /* Object.keys(this.imgBase).forEach(function(key){ document.getElementById(key).innerHTML="<img style='width:100%' src="+that.imgBase[key]+">" }); */  setTimeout(function(){ window.print(); alert('如未打印,请右键选择打印!')  // window.location.reload(); // document.body.innerHTML = oldstr; },1000) }

效果:

取消打印后页面排版已经改变了:

 

2. echarts打印,echarts如果是直接打印没问题,但是大多数情况是需要重新排列要打印的(就是不直接打印页面显示的,需要自定义打印内容),自定义打印的时候需要拿到要打印的html从新排版,但是这个时候拿不到echarts生成的图的,会显示空白。

所以解决方案是利用echarts的转成图片功能,提前把canvas图表转成图片,记录下来然后在从新排列的时候从新替换,或者是当echarts生成图片的时候立马换掉(这样处理显示效果不好)。

下面我的处理是把得到的图片全部按照echarts的id记录到一个对象里面,到时候在统一获取:

 

 

转载于:https://www.cnblogs.com/wangmaoling/p/10622941.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值