关于js/vue等前端技术实现打印的几种方式(仅限我试验过的)
我的小发现首先说明,我用的是jq插件。table表在打印的时候,写在<thead></thead>里边的表头,还有<tfoot></tfoot>之间的表尾会在打
我的小发现
首先说明,我用的是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里边的案例摸索出来的,留着下次用.
大概就这些,想起来啥再补充吧
更多推荐
所有评论(0)