前端打印pdf，相对来说比较方便，而且打印出来的效果与页面上表现出来的基本一致；而且可以随时控制需要打印的区域、需要的样式、特殊字符也能完美的打印出来；相对于后端PHP打印PDF来说，还是比较不错
总的来说，打印的核心还是调用浏览自带的打印函数，window.print(),下面总结了主要的几种打印方法，各有优缺点
方法一
window.print();
window.close();此方法是最原始的方法，可以直接打印当前网页的全部内容，缺点是不能控制需要打印的区域以及打印的样式（可通过link标签的media="print"来专门针对打印时设置不同的样式）
方法二
var iframe = document.createElement('iframe');
// ie下打印时，iframe会在页面中闪一下，所以设置推出屏幕外
iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
// str为需要打印的html代码
iframe.contentDocument.write(str);
iframe.contentWindow.print();
iframe.contentDocument.close();
document.body.removeChild(iframe);此方法需要在当前页面创建一个iframe，有可能会破坏当前页面的布局
方法三
var printWindow = window.open();
printWindow.document.write(str);
printWindow.print();
printWindow.close();此方法是在新窗口开启打印操作，优点是原网址不影响后续操作，缺点是新窗口可能会被浏览器拦截
方法四
// 打印插件依赖jQuery
<script src="https://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
// jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。
// 例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，
// 就引入jquery-migrate插件用于兼容低版本，同时也显示低版本方法替换成新版本方法的方案。
<script src="https://lib.baomitu.com/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
// 打印插件https://github.com/DoersGuild/jQuery.print
<script src="http://doersguild.github.io/jQuery.print/jQuery.print.js"></script>
<script>
$(function(){
$("#myElementId").print({
globalStyles: true, // 是否使用父级样式
mediaPrint: false, // 是否使用media='print'的css样式;会被globalStyles选项覆盖
stylesheet: null, // 要包含的外部样式表的URL
noPrintSelector: ".no-print", // 不想打印的元素的jQuery选择器，默认为".no-print"
iframe: true, // 是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false新开一个页面打印，可以去掉页眉页脚中不喜欢的标题和网址，默认为true
append: null, // 将内容添加到打印内容的后面
prepend: null,// 将内容添加到打印内容的前面，可以用来作为要打印内容
manuallyCopyFormValues: true, // 打印时是否更新的表单数据
deferred: $.Deferred().done(function () {}),// 回调函数
timeout: 750, // 从iframe或者新窗口加载打印数据的超时时间
title: null, // 打印标题
doctype: '<!doctype html>'
});
})
</script>使用插件打印，只需要传递唯一选择器即可，如果传递的不是唯一的选择器，例如传递的是class选择器，并且该选择器在页面上有多个，则在打印时只会打印第一个class选择器当中的内容
方法四拓展：
方法四打印时需要传递一个选择器，然后通过$(selector)转换为了jQuery对象，既然这样的话，那就可以$(str)，str为HTML字符串，这样的话，得到的也是jQuery对象，这样一来，就比较灵活了，该str既可以是后端传递过来的，也可以是通过jQuery获取页面元素得来的：
<script>
// 通过ajax获取HTML或者$(selector).html()或者前端拼接得到HTML
var str = '<div>我是打印内容</div>';
$(str).print(/*options*/);
</script>页面打印效果相关属性介绍
//@page: size:landscape 横向打印
// portrait：纵向打印
// A4 portrait: A4纸张，纵向打印
// margin: 边距，边距过大，会出现空白页；
// 0:去掉页眉页脚
// 22px 10px 16px:因处理页眉页脚问题导致自动分页后打印不全的解决方法
// page-break-after: avoid 页面避免出现空白页
// -webkit-print-color-adjust:exact; 打印元素背景色,行内样式无需此操作
// -moz-print-color-adjust:exact;
// -ms-print-color-adjust:exact;
// print-color-adjust:exact;
// 表格跨页显示时，若需要表格的表头表尾在每页都显示，thead{display: table-header-group}tfoot{display: table-footer-group;}
// 若不需要：thead,tfoot{display:table-row-group;}
// 表格分页时，内容不截断table tr,table thead,table tfoot{page-break-inside:avoid;}
// 强制分页，在需要分页的地方，加上如下代码：<div style="page-break-after:always;"></div>
// 表格列表，如果存在样式transform，则可能会导致表头边框样式失效
// orphans设置当元素内部发生分页时必须在页面底部保留的最少行数
// widows设置当元素内部发生分页时必须在页面顶部保留的最少行数完整实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<style>
body {margin:0;padding:0;box-sizing: border-box;font-size: 14px;}
table {width: 100%;border: 1px solid #000;border-collapse: collapse;line-height: 1.5em;}
thead th {border: 1px solid #000;}
td {padding: 0.6em 0;text-align: center;border: 1px solid #000;}
th {font-weight: normal;}
@media screen { .page-header, .page-footer { display: none; } }
@media print {
.print-box { width: 100%; box-sizing: border-box; }
.print-box .print-table,
.print-box .print-table > thead,
.print-box .print-table > tbody,
.print-box .print-table > tfoot,
.print-box .print-table > thead > tr,
.print-box .print-table > tbody > tr,
.print-box .print-table > tfoot > tr,
.print-box .print-table > thead > tr > td,
.print-box .print-table > tbody > tr > td,
.print-box .print-table > thead > tr > th,
.print-box .print-table > tfoot > tr > td {
border: none !important;
padding:0 !important;
width: 100% !important;
overflow: hidden;
}
/*页眉页脚,如若不需要页眉页脚，则只需将高度设置为0即可*/
.print-box .page-header, .print-box .page-footer {
display: block !important;
width: 100% !important;
position: fixed !important;
height: 22px !important;
background-color: #aaa !important;
color: #fff;
text-align: center !important;
}
.print-box .page-header {top: 0 !important;}
.print-box .page-footer {bottom: 0 !important;}
.print-box .page-header-space, .print-box .page-footer-space {width: 100% !important;}
.print-box .page-header-space{margin-top:22px;}
.print-box .page-footer-space{margin-bottom:22px;}
/*内容*/
.content thead, .content tfoot {display: table-row-group !important;}
.content thead, .content tfoot, .content tr, .content th, .content td {page-break-inside: avoid !important}
.content tr {page-break-after: auto !important;}
}
@page {
size: A4 landscape; /*portrait*/
margin: 0 12px;
page-break-after: avoid;
-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
print-color-adjust: exact;
color-adjust: exact;
}
</style>
<script src="https://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<script src="./jquery-migrate-1.2.1.min.js"></script>
<script src="./jQuery.print.js"></script>
<script>
$(function () {
function myPrint(print_html){
if(!print_html || $(print_html).length<=0){
return;
}
// 最外层必须含有父盒子
var str = `<div class="print-box">
<div class="page-header">页眉</div>
<div class="page-footer">页脚</div>
<table class="print-table">
<thead><tr><td><div class="page-header-space"></div></td></tr></thead>
<tbody>
<tr>
<td class="content">`;
str += handleHtml(print_html);
str += ` </td>
</tr>
</tbody>
<tfoot><tr><td><div class="page-footer-space"></div></td></tr></tfoot>
</table>
</div>`;
$(str).print({
globalStyles: true,// 是否使用父级样式
mediaPrint: false, // 是否使用media='print'的css样式;会被globalStyles选项覆盖
stylesheet: null, // 要包含的外部样式表的URL
noPrintSelector: null,//不想打印的元素的jQuery选择器，默认为".no-print"
iframe: true, //是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false新开一个页面打印，可以去掉页眉页脚中不喜欢的标题和网址，默认为true
append: null, //将内容添加到打印内容的后面
prepend: null,//将内容添加到打印内容的前面，可以用来作为要打印内容
deferred: $.Deferred().done(function () {}),//回调函数
timeout: 10000,//从iframe或者新窗口加载打印数据的超时时间
title: null,
manuallyCopyFormValues: true,//打印时是否更新的表单数据
doctype: '<!doctype html>'
});
}
// html字符串处理
function handleHtml(html_str){
var new_html_str = $('<div />',{html:html_str});
// jq方式处理：添加类、处理style等
/*
new_html_str.find('thead th').each(function(){
var transform = $(this).css('transform');
if(transform){
$(this).css('transform','none');
}
});
*/
return new_html_str.html();
}
// 打印
var print_html = $('.print-area').html();
myPrint(print_html);
})
</script>
</head>
<body>
<div class="print-area">
<table>
<thead>
<tr>
<th>项目</th>
<th>本月预算</th>
<th>本月实际发生</th>
<th>绝对差异(%)</th>
<th>相对差异(%)</th>
<th>累计预算</th>
<th>累计实际发生</th>
<th>绝对差异(%)</th>
<th>相对差异(%)</th>
<th>本月实际占当季预算比例</th>
</tr>
</thead>
<tbody>
<tr>
<td>项目</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900ddd<br>ewwrewrerew<br>poiiuuyy</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
<tr>
<td>项目1</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
<td>16900</td>
</tr>
</tbody>
<tfoot>
<tr style="color:red;font-weight: bold;">
<td>合计</td>
<td>3000</td>
<td>2600</td>
<td>400</td>
<td>400</td>
<td>20400</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>