![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
打印功能
丶酸酸
这个作者很懒,什么都没留下…
展开
-
React实现打印功能,实现打印ECharts图表功能。
写在前面:由于echarts图表是动态的数据,直接打印会丢失图表数据,所以打印echarts时会先将echarts图表转换成img图片,再进行打印。 *当多次循环调用echarts图表时,请注意要动态的修改绑定div的id,不要让多个echarts图表div的id相同。 一、先创建打印页面 创建PrintBox文件夹,在其中新建index.js文件以及styles.less文件,BarChart与PieChart是自己写的图表组件。(一会给你们看这俩页面的代码) index.js页面 小伙伴们,我这里是已原创 2020-08-14 17:58:27 · 868 阅读 · 0 评论 -
在react中实现局部页面打印功能
最近遇到了打印页面的问题。 使用window.print()打印,取消打印页面,页面会出现bug,需要用window.reload()重新加载一下页面,用户体验很差。 1.为了解决该问题,可以使用iframe的方式解决:(但是设置打印区域样式是个问题,只能写行内样式) 代码: //确认打印 printOk() { //获取打印区域 const printDiv= document.getElementById('printDiv'); const iframe = document.原创 2020-08-21 17:19:34 · 2252 阅读 · 2 评论 -
嵌套在iframe页面打印去掉页眉页尾
通过iframe打印局部页面时,去掉页眉页尾: //确认打印 printOk() { const el = document.getElementById('printDiv'); const iframe = document.createElement('IFRAME'); let doc = null; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;to原创 2020-08-21 17:25:45 · 933 阅读 · 0 评论