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

刺骨的言语ヽ痛彻心扉 2022-10-03 00:35 306阅读 0赞

**1. 项目中用到的打印**

**页面：**

![1105103-20190329172157507-1553212544.png][]

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

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

![1105103-20190329175131400-1802280898.png][]

![1105103-20190329172309193-1205594910.png][]

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) }

效果：

![1105103-20190329174017393-972837794.png][]

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

![1105103-20190329174233502-1731053757.png][]

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

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

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

**![1105103-20190401095149575-747753859.png][]**

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

[1105103-20190329172157507-1553212544.png]: /images/20220109/7f89f9fbfe214bdca8d22b91654d63ca.png
[1105103-20190329175131400-1802280898.png]: /images/20220109/b1e932e1dfa041c8806bc64617a06827.png
[1105103-20190329172309193-1205594910.png]: /images/20220109/9d31355332ab4d828579d7d4b265c649.png
[1105103-20190329174017393-972837794.png]: /images/20220109/41e97b5ee296465ea693086449e1da31.png
[1105103-20190329174233502-1731053757.png]: /images/20220109/9cab4473ffea4df6bc4a5f702682377b.png
[1105103-20190401095149575-747753859.png]: /images/20220109/ed35a2065b1349e8985c034b6746c185.png