使用打印插件說明：
/*
* printThis v1.15.1
* @desc Printing plug-in for jQuery
* @author Jason Day
*
*/
print.css 文件內容
@page
{
size: auto; /* auto is the initial value */
margin: 0mm 10mm 0mm 10mm; /* this affects the margin in the printer settings 最關鍵的還是這個*/
}
body
{
background-color:#FFFFFF;
margin: 0mm; /* this affects the margin on the content before sending to printer */
padding: 5mm 0 5mm 0 ;
}
修改打印插件源碼
第190 行處，改為： $head.append("<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "' media='print'>");
頁面調用程序
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- printThis -->
<script type="text/javascript" src="printThis.js"></script>
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print" />
<!-- demo -->
<script>
$('#basic').on("click", function () {
$('.demo').printThis({
loadCSS: "css/print.css"
});
});
$('#advanced').on("click", function () {
$('#impAndContent').printThis({
importCSS: true, // import parent page css
importStyle: false, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS: "css/print.css", // path to additional css file - use an array [] for multiple
header: "<h1>Look at all of my kitties!</h1>"
});
});
</script>
實現效果如圖：
;