关于js/vue等前端技术实现打印的几种方式（仅限我试验过的）

我的小发现

首先说明，我用的是jq插件。
table表在打印的时候，写在<thead></thead>里边的表头，还有<tfoot></tfoot>之间的表尾会在打印的时候自动拼在每一页数据的头和尾哦，这个能有效解决表格过长自动分页第二页断层的丑样子，加了表头跟好看呀

jq插件（jQuery.print.js）

插件嘛，引入就行了，使用方式如下：

	$('#printTable').print({
        globalStyles: true, //是否包含父文档的样式，默认为true
        mediaPrint: false, //是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
        stylesheet: null, //外部样式表的URL地址，默认为null
        noPrintSelector: '.no-print', //不想打印的元素的jQuery选择器，默认为".no-print"
        iframe: true, //是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
        append: null, //将内容添加到打印内容的后面
        prepend: null, //将内容添加到打印内容的前面，可以用来作为要打印内容
        deferred: $.Deferred()//回调函数
      })

#printTable是我页面需要打印的部分div的id。以上使用方法从网上百度的，stylesheet指的是外部样式url地址，我用在vue里边，没有外部样式地址，样式就如下两种方式写好像都可以

<style type="text/css" media="print">
</style>
<style type="text/css" >
@media print {}
</style>

window.print方式

跟上一种类似，但是这个最原始的功能是打印整个网页，如果你只是打印某个div里边的内容，网上的建议大多数是将div获取到之后替换原有网页，打印完之后再恢复原网页。尝试了一下效果不太好，因为原有网页的button的click时间受到了影响，而且丑！！！所以如果想用这种我觉得另开一页别较好，点打印按钮的时候window.open()；在新开的页面写入要打印的代码（包括style），执行完之后还可以window.close()。但是有插件肯定是插件好用啊，哈哈哈哈

		var newWindow=window.open("打印窗口","_blank");
        var docStr = document.getElementById("printTable").innerHTML;
        newWindow.document.write(docStr);
        var styles=document.createElement("style");
        styles.setAttribute('type','text/css');//media="print"
        styles.innerHTML="" 
        newWindow.document.getElementsByTagName('head')[0].appendChild(styles);
        newWindow.print();
        newWindow.close();

网上很火的lodop方式

这个得在电脑上安装插件啊，到时候谁用这个功能都得装，有点不爽唉。我在vue里边试用过，this.tableData是我的数组，里边有很多个打印块，我需要每一块ok之后分页，同一块自动分页【嗯，table可以自动分页】。嗯，虽然最后不用了，还是得记下来，谁知道哪天还要用呢

	var LODOP=getLodop();  
      LODOP.PRINT_INIT("随便写点啥，大概就是你这个打印事件的名字");
      var strStyle="<style>写一写你需要的样式</style>" 
      /*我的大概是这样，存一下
      td,th {border-width: 1px;border-style: solid;padding:5px;}table{border-top:none;border-collapse: collapse;width: 100%;}tr{width: 100%;}.tab_title td{border:none;}.title{text-align: center;line-height: 1;font-size: 30px;}.sub_title span{padding:0 30px;}
      */
      this.tableData.map((item,index)=>{
        LODOP.ADD_PRINT_TABLE(30,0,"100%","100%",strStyle+document.getElementById("tab"+index).innerHTML);
        LODOP.NewPageA(); //打印新的一页
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
        LODOP.SET_PRINT_STYLEA(0,"FontColor","#FF0000");
        LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
        LODOP.SET_PRINT_STYLEA(0,"Horient",3);  
        LODOP.ADD_PRINT_HTM(3,"90%",300,100,"<font color='#000000' format='Num'><span tdata='pageNO'>##</span>/<span tdata='pageCount'>##</span>页</font>");//右上角的页码
        LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
        LODOP.ADD_PRINT_TEXT(3,34,196,20,"左上角的文字");
        LODOP.SET_PRINT_STYLEA(0,"ItemType",1); 
      })
      LODOP.PREVIEW();

具体啥意思我也不太懂，没找到说明文档，要是有人找到告诉我一下就好了，这个是根据lodop里边的案例摸索出来的，留着下次用.

大概就这些，想起来啥再补充吧