hiprint 是一個(gè) web 打印的js組件，無(wú)需安裝軟件。支持移動(dòng)端、PC端瀏覽器、angular、vue、react, 等分頁(yè)預(yù)覽、打印，操作簡(jiǎn)單，運(yùn)行快速。預(yù)覽界面為css+html 。支持?jǐn)?shù)據(jù)分組，批量預(yù)覽。生成pdf、圖片更方便，可以在Window,ios,linux 系統(tǒng)瀏覽器快速運(yùn)行?？梢暬渲媚０?，自動(dòng)分頁(yè)打印。
hiprint 插件依賴(lài)jquery，（也就是說(shuō)，jquery必須在所有插件之前引入頁(yè)面），如果要使用二維碼和條形碼功能，需另外引入兩個(gè)js組件JsBarcode.all.js和qrcode.js。此2款條碼插件均是MIT協(xié)議，可以到github搜索下載最新版。
hiprint/
├── css/
│ ├── hiprint.css
│ ├── print-lock.css
├── plugins/
│ ├── JsBarcode.all.min.js
│ └── qrcode.js
│ └── jquery.minicolors.min.js
│ └── jquery.hiwprint.js
├── hiprint.bundle.js
├── polyfill.min.js
hiprint 既可以讓開(kāi)發(fā)者進(jìn)行可視化操作，提高工作效率。開(kāi)發(fā)人員也可以通過(guò)配置打印元素提供給客戶(hù)（非開(kāi)發(fā)人員）可視化拖拽 自定義打印模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hinnn-hiprint</title>
<!-- hiprint -->
<link href="hiprint/css/hiprint.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">
</head>
<body>
<h1>hiprint 是一款用于web打印的js組件</h1>
<!-- jQuery (hiprint 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 hiprint 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<!-- polyfill.min.js解決瀏覽器兼容性問(wèn)題v6.26.0-->
<script src="hiprint/polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="hiprint/hiprint.bundle.js"></script>
<!-- 條形碼生成組件-->
<script src="hiprint/plugins/JsBarcode.all.min.js"></script>
<!-- 二維碼生成組件-->
<script src="hiprint/plugins/qrcode.js"></script>
<!-- 調(diào)用瀏覽器打印窗口helper類(lèi)，可自行替換-->
<script src="hiprint/plugins/jquery.hiwprint.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hinnn-hiprint</title>
<!-- hiprint -->
<link href="hiprint/css/hiprint.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">
<!-- jQuery (hiprint 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
</head>
<body>
<h1 >hiprint 是一款用于web打印的js組件</h1>
<div id="templateDesignDiv" ></div>
<!-- hiprint 打印初始化，更多參數(shù)請(qǐng)查看文檔 -->
<script>
hiprint.init();
<!-- 創(chuàng)建打印模板對(duì)象-->
var hiprintTemplate = new hiprint.PrintTemplate();
<!-- 模板對(duì)象添加打印面板 paperHeader：頁(yè)眉線(xiàn) paperFooter：頁(yè)尾線(xiàn)-->
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
<!-- 文本 打印面板添加文本元素-->
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手動(dòng)添加text', textAlign: 'center' } });
<!-- 條形碼 打印面板添加條形碼元素-->
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
<!-- 二維碼 打印面板添加二維碼元素-->
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '二維碼', textType: 'qrcode' } });
<!-- 長(zhǎng)文本 打印面板添加長(zhǎng)文本元素-->
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '長(zhǎng)文本：' } });
<!-- 表格 打印面板添加表格元素 content為字符串 -->
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
<!-- html 打印面板添加自定義html content為字符串或$('..') -->
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
<!-- 豎線(xiàn) -->
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
<!-- 橫線(xiàn) -->
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
<!-- 矩形 -->
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
<!-- 打印設(shè)計(jì) -->
hiprintTemplate.design('#templateDesignDiv');
</script>
<!-- polyfill.min.js解決瀏覽器兼容性問(wèn)題v6.26.0-->
<script src="hiprint/polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="hiprint/hiprint.bundle.js"></script>
<!-- 條形碼生成組件-->
<script src="hiprint/plugins/JsBarcode.all.min.js"></script>
<!-- 二維碼生成組件-->
<script src="hiprint/plugins/qrcode.js"></script>
<!-- 調(diào)用瀏覽器打印窗口helper類(lèi)，可自行替換-->
<script src="hiprint/plugins/jquery.hiwprint.js"></script>
</body>
</html>
400 186 1886
