包含echarts图表网页打印总结（纯前端实现）

web打印最简单的办法就是使用一个window.print() 如果打印不涉及到动态获取数据的话 大部分都使用这个方法。就剩下样式的调整，网页打印的理想样子总是跟原网页有些许不同，有一些地方不想打印，另外想加些东西打印出来，既要对原网页做加法又要做减法。简单介绍一下网上的方法：
第一种，某些地方不想打印，使用display：none，并且要放在print 媒体css里面，这样才能控制在浏览器网页上显示，而打印的时候会去掉 本人最后实践了这种方法和下面那种方法，第二个方法很麻烦又容易出错，后来改用这种方法很快就实现了我要的效果。。。

这是网上别人贴的代码：

<style>
@media print{  .noprint{  display:none  }
}
</style>
<tr class="noprint">  <td height="133" align="center" valign="top">  <img src="Images/top.jpg" width="757" height="133"></td>  </tr>

这是我自己的实现：

第一个noprint给不想打印的tag加上class=“noprint” ;另一方面即想打印出来而又不想在网页上显示的元素，则在screen的style里对它设置display:none,在媒体print的style里设置它正常想打印出来的样式，如下面的.basic h5元素

<style type="text/css" media=print>
.noprint{display:none}
.basic h5{ line-height:40px; font-size:18px; color:#900;  padding-left:260px; display:block}</style>
//下面的style默认媒体属性为screen
<style type="text/css">
.basic h5{display:none}
</style><div id="divprint" class="basic">
<h5>$!{query.stockCode}发行情况查询报表</h5>
//后面省略

第二种，window.document.body.innerHTML改变原网页的html，增加或者减少某部分，打印完再变回来 or  window.open新打开一个窗口 传给这个window.ducument新的打印页面html  一开始，我觉得这种方法不错。后来经过实际应用，这个方法需要拼接html，真的特别容易出错。scripttag如果放在body里，document.body.innerHTML里面就会包含的，不用特意把script摘出来拼接，我就傻傻的这么做了，tytn......新开一个窗口比改变原网页好一点，省的把原网页也改的乱七八糟，可能是因为我的原网页有echarts图表部分，反正我再把原来body的innerHTML替换回来的时候 echarts图表就不显示了。后来新开一个窗口，在新窗口展现的样子就是我期望的打印页面的样子了。但是我在原网页的script里打开一个新窗口后面调用新窗口的print会弹出一个打印窗口 但是预览页面上并没有echarts图表，在新页面的script里写window.print也不管用，这块还要再研究一下，好奇怪。。。


<!--打印的实现2：start-->  <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
<script>
function preview(oper)
{
if (oper < 10)
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}
</script>  <p>XXXXX</p>  <!--startprint1-->要打印的内容<!--endprint1-->  再加个打印按纽 onclick=preview(1)   <!--打印的实现2：end-->

这段代码是失败的实践，我觉得可能是哪里出错了？？为什么弹出的打印窗口预览图上不显示echarts的饼图呢

<script id="myScript" type="text/javascript">
jQuery(function() {    jQuery("#print").click(function() {//拼接真的好容易出错，先获取head部分，再从body里摘出来想打印的部分
var str=jQuery("head").html();
var prnhtml=jQuery("#divprint").html();
var sprnstr="<!--startprint-->";//设置打印开始区域
var eprnstr="<!--endprint-->";//设置打印结束区域
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr))+prnhtml.substring(prnhtml.indexOf(sprnstr)+18);//从结束代码向前取html
//前面插入一个想打印的h5标签
prnhtml="<h5 style='line-height:40px; font-size:18px; color:#900;  padding-left:260px;'>"+jQuery("#stockCode").val()+"发行情况查询报表</h5>"+prnhtml;
//html+head+body全都加起来
prnhtml='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>'+str+'</head><body><div class="basic">'+prnhtml+'</div></body></html>';
var oPop=window.open('','oPop');
oPop.document.write(prnhtml);
oPop.document.close();
oPop.print();
oPop.close();   });});
</script>

含echarts图表の网页打印相关推荐

前端报表导出成word文档（含echarts图表）
前端报表导出成word文档(含echarts图表) 一.问题背景: 前端vue做的各种维度的报表,原来是通过前端整体截屏导出成PDF,但部分报表在遇到跨页时会被截断,客户体验极差.然后又考虑客户可能需 ...
js将html转为word文档,js将html导出到word文档（含echarts图表）
需求在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可 ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...
vue实现echarts图表下载（含多张图表），导出图片格式
使用插件: html2canvas npm安装: npm install html2canvas 组件引入: import html2canvas from "html2canvas&quo ...
大数据平台展示可视化效果，echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...
动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
ASP.Net绑定Sql数据源用echarts图表来展示数据
ASP.Net绑定Sql数据源用echarts图表来展示数据这里我们需要先学会ajax请求和网页的echarts图的使用不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的首先大家可以先从 ...
echarts图片的打印问题
echarts图片很方便也好用,但是最近项目里用到了打印功能,要把页面图表也打印出来. 神奇的是,一点打印,图表就不见了,找了一下原因,原来是因为echarts是动态渲染出来的. 有什么办法能解决呢, ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...

含echarts图表の网页打印

包含echarts图表网页打印总结（纯前端实现）

含echarts图表の网页打印相关推荐

最新文章

热门文章