使用jqprint打印網頁指定區域的內容
根據工廠的需求，要在瀏覽器上打印執行一系列操作之後，打印出一個標籤，貼在包裝盒上。
本人也是第一次做瀏覽器打印的開發，做個筆記記錄一下過程，方便以後回顧
插件
百度了一大圈，發現有很多打印方案，有直接調用瀏覽器的，有需要提前安裝插件的，有適配IE的。
我這裏選的是jquery插件jQuery.print
使用
- 引入插件
- 給需要打印的部分添加一個id屬性（如果不是打印整個頁面）
- js選中指定區域，調用打印
demo
先在html中引入插件，必須放在jquery的位置後面，然後在需要局部打印的地方設置id，這裏設置的id爲
tag
<html>
<head>
...
<!-- 必須在加載插件之前先加載jquery -->
<script src="./common/js/jQuery.print.min.js"></script>
...
</head>
<body>
<!-- tag標籤內的內容爲需要打印的部分 -->
<div class="tag" id="tag">
<div class="left-box">
<!-- 此處爲html代碼，省略 -->
</div>
<div class="right-box">
<!-- 此處爲html代碼，省略 -->
</div>
</div>
</body>
</html>
打印
tag區域的內容
// 獲取需要打印的區域html
var html = $("#tag").html();
// 調用打印
$.print(html, {
debug: false,
globalStyles: true, // 是否使用父文檔的樣式表
iframe: true,
importCSS: true,
printContainer: false,
operaSupport: false
});
最終效果
- 瀏覽器操作界面
![操作界面]()
- 打印預覽的效果（只有標籤的內容，不包含其他元素）
![打印預覽效果]()
