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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/pk142536/article/details/83144313

我的小发现

首先说明,我用的是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里边的案例摸索出来的,留着下次用.

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

展开阅读全文

没有更多推荐了,返回首页