一、文件下载指引
1、官网路径
网页官网主要提供html的使用
2、下载路径
二、启动下载的项目
1、解压文件
将下载的安装包进行解压
2、放入编辑工具运行
这里以vscode为例，使用nodejs、npm安装(没有环境先安装npm安装环境，网上很多)
(1)开启终端
(2)启用http服务
bash
# 安装 http-server 全局包
npm install -g http-server
bash
# 启动服务器，端口为 8000
http-server -p 8000(3)进入项目
执行完上述命令，即可给出本地地址，复制到浏览器打开即可(这里最好使用cmd的终端模式)
3、页面展示
官网提供的很多代码都是缺失的，所以主页页面还是参考主页面，可拖拽编辑打印都没问题
三、将代码整理为简单的模板打印
这里将设计页面与打印页面进行独立，设计页面设计完可下载模板，然后指定模板(这里定死)在打印页面直接展示打印数据，可进行打印
1、添加设计页面design.html
根据之前提供的custom.html页面进行修改，去掉不必要的信息，并且添加导入导出模板功能
代码如下
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模板设计页面</title>
<link href="css/hiprint.css" rel="stylesheet" />
<link href="css/print-lock.css" rel="stylesheet" />
<link href="content/bootstrap.min.css" rel="stylesheet">
<script src="content/jquery-3.7.1.min.js"></script>
<script src="content/bootstrap.min.js"></script>
<style>
.hinnn-layout,
.hinnn-layout * {
box-sizing: border-box;
}
.hinnn-layout {
display: flex;
flex: auto;
flex-direction: column;
}
.hinnn-layout.hinnn-layout-has-sider {
flex-direction: row;
}
.hinnn-layout-sider {
display: flex;
flex-direction: row;
position: relative;
}
.hinnn-layout-content {
flex: auto;
}
.hinnn-header {
position: relative;
z-index: 1030;
display: block;
}
.wrapper {
min-height: 100%;
}
.height-100-per {
height: 100%;
}
/* 模板管理区域样式 */
.template-management {
margin: 15px 0;
padding: 15px;
border: 1px solid #e8e8e8;
background-color: #f9f9f9;
}
.template-management h3 {
margin-top: 0;
margin-bottom: 15px;
}
.template-management .form-group {
margin-bottom: 10px;
}
.template-management .btn {
margin-right: 10px;
}
</style>
</head>
<body>
<layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
<content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
<div class="container-fluid height-100-per print-content">
<!-- 模板管理区域 -->
<div class="template-management">
<h3>模板管理</h3>
<div class="form-group">
<label for="templateNameInput">模板名称：</label>
<input type="text" id="templateNameInput" class="form-control" style="width: 300px; display: inline-block; margin-right: 10px;" placeholder="请输入模板名称">
<button id="saveTemplateBtn" class="btn btn-primary">保存模板</button>
<button id="exportTemplateBtn" class="btn btn-warning">导出模板文件</button>
</div>
<div class="form-group">
<label for="templateList">保存的模板：</label>
<select id="templateList" class="form-control" style="width: 300px; display: inline-block; margin-right: 10px;">
<option value="">-- 选择模板 --</option>
</select>
<button id="loadTemplateBtn" class="btn btn-success">加载模板</button>
<button id="deleteTemplateBtn" class="btn btn-danger">删除模板</button>
</div>
<div class="form-group">
<label for="importTemplateFile">导入模板文件：</label>
<input type="file" id="importTemplateFile" accept=".json" style="display: inline-block; margin-right: 10px;">
</div>
<div class="form-group">
<a href="print.html" class="btn btn-info">前往打印页面</a>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<!-- 左侧拖拽元素 -->
<div class="col-sm-3 col-md-2" style="padding-right:0px;">
<div class="rect-printElement-types hiprintEpContainer">
<ul class="hiprint-printElement-type">
<li>
<span class="title"><code>拖拽列表</code></span>
<ul>
<li>
<a class="ep-draggable-item" tid="testModule.text" style="">
<span class="glyphicon glyphicon-text-width"
aria-hidden="true"></span>
<span class="glyphicon-class">文本</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.image" style="">
<span class="glyphicon glyphicon-picture"
aria-hidden="true"></span>
<span class="glyphicon-class">图片</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.longText">
<span class="glyphicon glyphicon-subscript"
aria-hidden="true"></span>
<span class="glyphicon-class">长文</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.tableCustom" style="">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class="glyphicon-class">表格</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.html">
<span class="glyphicon glyphicon-header"
aria-hidden="true"></span>
<span class="glyphicon-class">html</span>
</a>
</li>
</ul>
</li>
<li>
<span class="title">辅助</span>
<ul>
<li>
<a class="ep-draggable-item" tid="testModule.hline" style="">
<span class="glyphicon glyphicon-resize-horizontal"
aria-hidden="true"></span>
<span class="glyphicon-class">横线</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.vline" style="">
<span class="glyphicon glyphicon-resize-vertical"
aria-hidden="true"></span>
<span class="glyphicon-class">竖线</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.rect">
<span class="glyphicon glyphicon-unchecked"
aria-hidden="true"></span>
<span class="glyphicon-class">矩形</span>
</a>
</li>
<li>
<a class="ep-draggable-item" tid="testModule.oval">
<span class="glyphicon glyphicon-record"
aria-hidden="true"></span>
<span class="glyphicon-class">椭圆</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-md-10">
<!-- 纸张调整+---预览、打印按钮 -->
<div class="hiprint-toolbar" style="margin-top:15px;">
<ul>
<li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
<li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
<li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
<li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
<li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
<li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>
<li><a class="hiprint-toolbar-item"><input type="text" id="customWidth"
style="width: 50px;height: 19px;border: 0px;"
placeholder="宽/mm" /></a></li>
<li><a class="hiprint-toolbar-item"><input type="text" id="customHeight"
style="width: 50px;height: 19px;border: 0px;"
placeholder="高/mm" /></a></li>
<li><a class="hiprint-toolbar-item"
onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a>
</li>
<li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
<li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>
<li>
<a class="btn hiprint-toolbar-item " style="color: #fff;background-color: #d9534f;border-color: #d43f3a;" id="A4_preview">快速预览</a>
</li>
<li>
<a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- 打印模板 -->
<div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;"></div>
</div>
</div>
</div>
</div>
</div>
</content>
<sider class="hinnn-layout-sider">
<div class="container height-100-per" style="width:250px;">
<div class="row">
<div class="col-sm-12">
<div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
</div>
</div>
</div>
</sider>
</layout>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document" style="width: 825px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">打印预览</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
<div class="prevViewDiv"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--[[ 测试专用 单独使用无需引入 -->
<script src="custom_test/custom-etype-provider.js"></script>
<script src="custom_test/custom-print-json.js"></script>
<!--测试专用 单独使用无需引入 ]] -->
<!--单独使用无需引入 -->
<script src="polyfill.min.js"></script>
<script src="plugins/jquery.minicolors.min.js"></script>
<script src="plugins/JsBarcode.all.min.js"></script>
<script src="plugins/qrcode.js"></script>
<script src="hiprint.bundle.js"></script>
<script src="plugins/jquery.hiwprint.js"></script>
<script>
var hiprintTemplate;
$(document).ready(function () {
//初始化打印插件
hiprint.init({
providers: [new customElementTypeProvider()]
});
//hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');
//设置左侧拖拽事件
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
// 清空设计区域
$('#hiprint-printTemplate').empty();
// 创建空模板
hiprintTemplate = new hiprint.PrintTemplate({
template: { panels: [{ index: 0, height: 297, width: 210, paperHeader: 0, paperFooter: 0, printElements: [] }] },
settingContainer: '#PrintElementOptionSetting',
paginationContainer: '.hiprint-printPagination'
});
// 打印设计
hiprintTemplate.design('#hiprint-printTemplate');
// 隐藏页码
setTimeout(function() {
$('.hiprint-paperNumber').hide();
if ($('#hiprint-printTemplate').children().length === 0) {
// 重新设计
hiprintTemplate.design('#hiprint-printTemplate');
// 重新隐藏页码
setTimeout(function() {
$('.hiprint-paperNumber').hide();
}, 100);
}
}, 100);
// 加载保存的模板列表
loadTemplateList();
// 保存模板按钮点击事件
$('#saveTemplateBtn').click(function () {
var templateName = $('#templateNameInput').val().trim();
if (!templateName) {
alert('请输入模板名称');
return;
}
// 检查是否有重复的模板名称
var templates = getTemplates();
var isDuplicate = false;
for (var id in templates) {
if (templates[id].name === templateName) {
isDuplicate = true;
break;
}
}
if (isDuplicate) {
if (!confirm('已存在同名模板，是否覆盖？')) {
return;
}
}
// 获取当前模板
var currentTemplate = hiprintTemplate.getJson();
var templateData = {
name: templateName,
template: currentTemplate,
timestamp: new Date().getTime()
};
// 保存到localStorage
saveTemplate(templateData);
alert('模板保存成功');
loadTemplateList(); // 刷新模板列表
});
// 导出模板文件按钮点击事件
$('#exportTemplateBtn').click(function () {
var templateName = $('#templateNameInput').val().trim();
if (!templateName) {
alert('请输入模板名称');
return;
}
// 获取当前模板
var currentTemplate = hiprintTemplate.getJson();
var templateData = {
name: templateName,
template: currentTemplate,
timestamp: new Date().getTime(),
exportDate: new Date().toISOString()
};
// 创建JSON字符串
var jsonStr = JSON.stringify(templateData, null, 2);
// 创建Blob对象
var blob = new Blob([jsonStr], { type: 'application/json' });
// 创建下载链接
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = templateName + '_template.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('模板导出成功');
});
// 导入模板文件
$('#importTemplateFile').change(function (e) {
var file = e.target.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function (e) {
try {
var templateData = JSON.parse(e.target.result);
if (templateData && templateData.template) {
// 总是使用文件名作为模板名称，不进行任何截断
// 从文件名中移除.json后缀作为模板名称
var templateName = file.name ? file.name.replace('.json', '') : '';
templateData.name = templateName || '导入的模板_' + new Date().getTime();
// 总是生成新的timestamp，避免覆盖原有模板
templateData.timestamp = new Date().getTime();
// 检查是否有重复的模板名称
var templates = getTemplates();
var isDuplicate = false;
for (var id in templates) {
if (templates[id].name === templateData.name) {
isDuplicate = true;
break;
}
}
if (isDuplicate) {
if (!confirm('已存在同名模板，是否覆盖？')) {
return;
}
}
// 保存到localStorage
saveTemplate(templateData);
loadTemplateList(); // 刷新模板列表
alert('模板导入成功，已添加到模板列表中');
} else {
alert('无效的模板文件');
}
} catch (error) {
alert('模板文件解析失败: ' + error.message);
}
};
reader.readAsText(file);
});
// 加载模板按钮点击事件
$('#loadTemplateBtn').click(function () {
var templateId = $('#templateList').val();
if (!templateId) {
alert('请选择要加载的模板');
return;
}
// 从localStorage加载模板
var templateData = loadTemplate(templateId);
if (templateData) {
try {
// 清空设计区域
$('#hiprint-printTemplate').empty();
// 重新创建模板对象
hiprintTemplate = new hiprint.PrintTemplate({
template: templateData.template,
settingContainer: '#PrintElementOptionSetting',
paginationContainer: '.hiprint-printPagination'
});
// 重新设计
hiprintTemplate.design('#hiprint-printTemplate');
// 隐藏页码
setTimeout(function() {
$('.hiprint-paperNumber').hide();
}, 100);
// 更新模板名称输入框
$('#templateNameInput').val(templateData.name);
} catch (error) {
alert('模板加载失败: ' + error.message);
}
} else {
alert('模板加载失败');
}
});
// 删除模板按钮点击事件
$('#deleteTemplateBtn').click(function () {
var templateId = $('#templateList').val();
if (!templateId) {
alert('请选择要删除的模板');
return;
}
if (confirm('确定要删除选中的模板吗？')) {
deleteTemplate(templateId);
loadTemplateList(); // 刷新模板列表
}
});
$('#A4_preview').click(function () {
// 使用空数据预览
$('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml({}));
$('#myModal').modal('show');
});
$('#A4_directPrint').click(function () {
// 使用空数据打印
hiprintTemplate.print({});
});
$('#A4_printByHtml').click(function () {
hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
});
});
//调整纸张
var setPaper = function (paperTypeOrWidth, height) {
hiprintTemplate.setPaper(paperTypeOrWidth, height);
}
//旋转
var rotatePaper = function () {
hiprintTemplate.rotatePaper();
}
var clearTemplate = function () {
hiprintTemplate.clear();
}
// 模板管理相关函数
function getTemplates() {
var templates = localStorage.getItem('hiprintTemplates');
return templates ? JSON.parse(templates) : {};
}
function saveTemplate(templateData) {
var templates = getTemplates();
var templateId = null;
// 检查是否存在同名模板，如果存在则使用原有的ID进行覆盖
for (var id in templates) {
if (templates[id].name === templateData.name) {
templateId = id;
break;
}
}
// 如果不存在同名模板，则生成新的ID
if (!templateId) {
templateId = 'template_' + templateData.timestamp;
}
templates[templateId] = templateData;
localStorage.setItem('hiprintTemplates', JSON.stringify(templates));
}
function loadTemplate(templateId) {
var templates = getTemplates();
return templates[templateId];
}
function deleteTemplate(templateId) {
var templates = getTemplates();
delete templates[templateId];
localStorage.setItem('hiprintTemplates', JSON.stringify(templates));
}
function loadTemplateList() {
var templates = getTemplates();
var $list = $('#templateList');
$list.empty().append('<option value="">-- 选择模板 --</option>');
for (var id in templates) {
var template = templates[id];
$list.append('<option value="' + id + '">' + template.name + '</option>');
}
}
</script>
</body>
</html>2、添加打印页面template-view.html
这里根据设定好的json模板直接展示模板信息，点击按钮即可完成打印操作
代码中，使用的model/demoModel.json为模板，可直接根据design.html下载模板得到
代码中，使用的model/print-data.json为打印的数据，这样可以直接实现打印的动态操作
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>模板预览页面</title>
<!-- hiprint -->
<link href="css/hiprint.css" rel="stylesheet">
<link href="css/print-lock.css" rel="stylesheet">
<link href="css/print-lock.css" media="print" rel="stylesheet">
<!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="content/jquery-3.7.1.min.js"></script>
<!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
<script src="polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="hiprint.bundle.js"></script>
<!-- 条形码生成组件-->
<script src="plugins/JsBarcode.all.min.js"></script>
<!-- 二维码生成组件-->
<script src="plugins/qrcode.js"></script>
<!-- 调用浏览器打印窗口helper类，可自行替换-->
<script src="plugins/jquery.hiwprint.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.print-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #d9534f;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 20px;
}
.print-btn:hover {
background-color: #c9302c;
}
.template-container {
border: 1px solid #e0e0e0;
padding: 20px;
background-color: #fafafa;
display: inline-block;
}
.hiprint-printTemplate {
margin-top: 0 !important;
}
</style>
</head>
<body>
<div class="container">
<h1>模板预览</h1>
<button id="printBtn" class="print-btn">打印</button>
<div class="template-container">
<div id="templateViewDiv"></div>
</div>
</div>
<script>
// 全局变量
var hiprintTemplate;
var printData = {};
var templateData = {};
// 初始化
$(document).ready(function () {
// 初始化hiprint
hiprint.init();
// 加载打印数据
$.getJSON('model/print-data.json', function (data) {
printData = data;
console.log('打印数据加载成功:', printData);
// 数据加载完成后加载模板
loadTemplate();
}).fail(function () {
console.error('打印数据加载失败');
$('#templateViewDiv').html('<p style="color: red;">打印数据加载失败，请检查文件路径</p>');
});
// 加载模板
function loadTemplate() {
$.getJSON('model/demoModel.json', function (data) {
templateData = data;
if (templateData && templateData.template) {
// 创建打印模板对象
hiprintTemplate = new hiprint.PrintTemplate({
template: templateData.template
});
// 使用design模式显示模板（会自动添加量度并保持与模板定义一致的宽高）
hiprintTemplate.design('#templateViewDiv');
// 隐藏页码
setTimeout(function () {
$('.hiprint-paperNumber').hide();
}, 100);
console.log('模板加载成功');
} else {
console.error('无效的模板数据');
$('#templateViewDiv').html('<p style="color: red;">模板数据无效</p>');
}
}).fail(function () {
console.error('模板加载失败');
$('#templateViewDiv').html('<p style="color: red;">模板加载失败，请检查文件路径</p>');
});
}
// 打印按钮点击事件
$('#printBtn').click(function () {
if (hiprintTemplate) {
hiprintTemplate.print(printData);
} else {
alert('模板尚未加载完成，请稍后再试');
}
});
});
</script>
</body>
</html>