hiprint 是一個 web 打印的js組件，無需安裝軟件。支持移動端、PC端瀏覽器、angular、vue、react, 等分頁預(yù)覽、打印，操作簡單，運行快速。預(yù)覽界面為css+html 。支持?jǐn)?shù)據(jù)分組，批量預(yù)覽。生成pdf、圖片更方便，可以在Window,ios,linux 系統(tǒng)瀏覽器快速運行?？梢暬渲媚０澹詣臃猪摯蛴?。
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 既可以讓開發(fā)者進行可視化操作，提高工作效率。開發(fā)人員也可以通過配置打印元素提供給客戶（非開發(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 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 hiprint 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<!-- polyfill.min.js解決瀏覽器兼容性問題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類，可自行替換-->
<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 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<h1 >hiprint 是一款用于web打印的js組件</h1>
<div id="templateDesignDiv" ></div>
<!-- hiprint 打印初始化，更多參數(shù)請查看文檔 -->
<script>
hiprint.init();
<!-- 創(chuàng)建打印模板對象-->
var hiprintTemplate = new hiprint.PrintTemplate();
<!-- 模板對象添加打印面板 paperHeader：頁眉線 paperFooter：頁尾線-->
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插件手動添加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' } });
<!-- 長文本 打印面板添加長文本元素-->
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '長文本：' } });
<!-- 表格 打印面板添加表格元素 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:'' } });
<!-- 豎線 -->
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
<!-- 橫線 -->
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
<!-- 矩形 -->
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
<!-- 打印設(shè)計 -->
hiprintTemplate.design('#templateDesignDiv');
</script>
<!-- polyfill.min.js解決瀏覽器兼容性問題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類，可自行替換-->
<script src="hiprint/plugins/jquery.hiwprint.js"></script>
</body>
</html>
400 186 1886
