- 現在網頁排版不在局限 Html 框架，許多人使用 Bootstrap 進行排版，但需要列印網頁頁面時，如使用 Bootstrap 排版頁面會跑版，無法列印使用者所看到的頁面
- printThis.js ：此套件在列印時可以套用 css 的樣版
- Step 1: 建立一個空專案，並創建 Home page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="btn btn-default" onclick="printtable('DemoPrint')">
列印
</button>
<div id="DemoPrint">
<div class="row">
<div class="col-xs-4">.col-xs-14</div>
<div class="col-xs-4">.col-xs-14</div>
<div class="col-xs-4">.col-xs-14</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-24</div>
<div class="col-xs-4">.col-xs-24</div>
<div class="col-xs-4">.col-xs-24</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-34</div>
<div class="col-xs-4">.col-xs-34</div>
<div class="col-xs-4">.col-xs-34</div>
</div>
</div>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
function printtable(pID) {
console.log(pID);
newwin = window.open('');
newwin.document.write(document.getElementById('' + pID + '').outerHTML);
newwin.print();
newwin.close();
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="btn btn-default" id="printtable">
列印
</button>
<div id="DemoPrint">
<div class="row">
<div class="col-xs-4">.col-xs-14</div>
<div class="col-xs-4">.col-xs-14</div>
<div class="col-xs-4">.col-xs-14</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-24</div>
<div class="col-xs-4">.col-xs-24</div>
<div class="col-xs-4">.col-xs-24</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-34</div>
<div class="col-xs-4">.col-xs-34</div>
<div class="col-xs-4">.col-xs-34</div>
</div>
</div>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/printThis.js"></script>
<script>
$(function () {
$('#printtable').click(function () {
$("#DemoPrint").printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: false, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
//loadCSS: "style.css", // path to additional css file - use an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove all inline styles from print elements
printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
header: null, // prefix to html
footer: null, // postfix to html
base: false, // preserve the BASE tag, or accept a string for the URL
formValues: false, // preserve input/form values
canvas: false, // copy canvas elements (experimental)
doctypeString: "", // enter a different doctype for older markup
removeScripts: false, // remove script tags from print content
copyTagClasses: false // copy classes from the html & body tag
});
});
});
</script>
</body>
</html>
沒有留言:
張貼留言