web页面打印怎么分页呢？页面不像word，可以随意分页，怎样解决这个问题呢？

css是好东西，page-break-after: always;
这个css就是用来控制分页的，always就是强制分页了。举例如下：
<div style=”page-break-after: always;”>
<table><tr><td>第一页</td></tr></table>
</div>
<div style=”page-break-after: always;”>
<table><tr><td>第二页</td></tr></table>
</div>
<div style=”page-break-after: always;”>
<table><tr><td>第三页</td></tr></table>
</div>

1.js打印是调用 window.print() 这个方法。
2.因为window.print()是打印整个页面，但有的时候我们想隐藏掉部分页面上的数据的话，该怎么处理呢 ？
3.这个时候我们可以通过css样式来控制打印时候的样式

打印前：


打印后（隐藏了左侧的名字和头部导航）：



代码如下：

< style media=“printTest”>

@media print {

.nodayin {

display: none;

}

}

< /style>
4.如果我们需要把学生的数据进行分页处理，也就是打印的时候学生的错题和错题解析不能同时出现在一张纸上。

这个时候可以用到css的分页符，<div  style=“page-break-after:always”>，这样的话学生的错题和解析就会各自新起一页，便于查看。

相信很多人在做前端的时候，有时候需要把前端页面上的内容导出来，传统的方法是在用后台用IO流，用IO流写起来往往非常麻烦，这里我提供了纯前端的解决方法

首先是引入网上的两个库
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

下面是js函数
function println(){
			  html2canvas(document.body, {
              onrendered:function(canvas) {
                  var contentWidth = canvas.width;
                  var contentHeight = canvas.height;
                  //一页pdf显示html页面生成的canvas高度;
                  var pageHeight = contentWidth / 595.28 * 841.89;
                  //未生成pdf的html页面高度
                  var leftHeight = contentHeight;
                  //pdf页面偏移
                  var position = 0;
                  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                  var imgWidth = 555.28;
                  var imgHeight = 555.28/contentWidth * contentHeight;
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);
                  var pdf = new jsPDF('', 'pt', 'a4');
                  //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                  //当内容未超过pdf一页显示的范围，无需分页
                  if (leftHeight < pageHeight) {
                      pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
                  } else {
                      while(leftHeight > 0) {
                          pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                          leftHeight -= pageHeight;
                          position -= 841.89;
                          //避免添加空白页
                          if(leftHeight > 0) {
                              pdf.addPage();
                          }
                      }
                  }

                  pdf.save('content.pdf');
              }
          })
          alert("正在导出,请稍后");
			  setTimeout(function(){location.reload();},2000); //延迟两秒刷新页面，根据实际情况，这一句可以不要
		}

下面是导出的效果

展开全部
jqprint是一个基于jQuery编写的页面打印的一个小插件62616964757a686964616fe4b893e5b19e31333361323037，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以打印网页上的某个区域，这是个亮点。比如说现在要打印如下的一个效果：
我们可以通过写代码完成上述的效果，然后单击网页上的某个按钮，在按钮的处理方法里调用jqprint()，来完成这个区域的的打印显示的操作，首先要获取这个区域，然后调用一个方法即可了，如下所示：
[javascript] view plain copy print?
$("#visaReport").jqprint({});
这就是一个简单的操作，但是实际需要的时候，有时我们页面显示样式和我们打印的样式是有些区别的，幸好CSS声明的地方提供了一个media的属性，我们可以指定其输出的方式为print，即media=print的这个属性，写了这个属性之后，所引入CSS的一些样式在打印的时候才会生效了，通过在打印的时候，我们可以通过样式去改变当前网页的显示内容，及显示的样式。先来看下代码吧！
[html] view plain copy print?
效果测试
$(function()
{
$("#btn1").click(function()
{
$("#visaReport").jqprint({});
});
});
XX中心