核心模板对象

模板对象

模板核心对象。创建它的实例，以实现浏览器打印，直接打印/静默打印(静默打印机客户端)，“打印设计”，“打印预览”和“导出PDF”的功能

// 新建模板 参数见下方表格
const json = {}; // 根据模板json创建模板对象
let printTemplate = new hiprint.PrintTemplate({
  template: json, // 模板json
  // 参数见下方表格
});
// 将模板设计到指定容器中
// '#hiprint-printTemplate' ==> jQuery('#hiprint-printTemplate') ==> $('#hiprint-printTemplate')
printTemplate.design('#hiprint-printTemplate');

// 设计完成后 获取模板json 
const template = printTemplate.getJson();

// 其中 “text” 是一个元素的 “字段名(field)”
let printData = {text: '这是打印时显示的文本'};
// 偏移设置: 不同PC 同一个打印机可能存在偏移  单位: mm
let offsetOption = {leftOffset: -1, topOffset: -1};
// 获取预览的 html 内容, 可自行填充到 容器中
const html = (await printTemplate.getHtml(printData, {...offsetOption})).html();
// 浏览器打印 --> 需要用户 手动 点击打印按钮 !!! “无法监听“ 用户是否点了打印
await printTemplate.print(printData, {...offsetOption});
// 批量打印 --> 生成的 html 页面越多 越容易造成浏览器卡死
await printTemplate.print([printData1, printData2, printData3], {...offsetOption});

// 直接打印/静默打印 --> 有回调是否将“打印任务” “发生成功” 给打印机
await printTemplate.print2(printData, {...offsetOption, printer: '打印机名称', title: '打印任务名称'});
// 可指定打印纸张大小,打印份数等参数, 详细参数见 https://www.electronjs.org/zh/docs/latest/api/web-contents#contentsprintoptions-callback
await printTemplate.print2(printData, {printer: '打印机名称', pageSize: 'A4'});
const res = await printTemplate.print2(printData, {
  printer: '打印机名称',
  pageSize: {width: 210 * 1000, height: 297 * 1000},
  copies: 2, // 打印份数
  pageRanges: [
    {
      from: 0,
      to: 1
    }
  ], // 打印页数
  landscape: false, // 横向打印: false: 纵向, true: 横向
  color: true, // 是否彩色打印
  duplexMode: 'simplex', // 打印模式 simplex,shortEdge,longEdge
});
console.log(res);


// 需引入插件 @sv-print/plugin-api-pdf3
// 导出PDF -> 默认下载
await printTemplate.toPdf(printData, {
  ...offsetOption,
  name: 'pdf名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
// 需引入插件 @sv-print/plugin-api-image
// 导出图片 -> 默认下载
await printTemplate.toImage(printData, {
  ...offsetOption,
  name: '图片名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
  quality: 0.8, // 默认 0.92  图片质量 0-1
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toImage 进度', percent);
  },
});

// 需引入插件 @sv-print/plugin-api-pdf3
// 导出pdf, 获取 url/blob 对象
const res = await printTemplate.toPdf(printData, {
  isDownload: false, // 不自动下载
  name: 'pdf名称',
  type: 'blob', // 默认 blob  支持: blob、bloburl、pdfobjectnewwindow、dataurl  --> jspdf.output(type)
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
})
console.log('toPdf', res);
// 需引入插件 @sv-print/plugin-api-image
// 导出图片, 获取 url/blob 对象
const res = await printTemplate.toImage(printData, {
  isDownload: false, // 不自动下载
  name: '图片名称',
  limit: 10, // 默认 10  多少页为一个 图片文件, 太多 图片文件就很长
  type: 'image/jpeg', // 默认 image/jpeg   --> canvas.toDataURL(type, quality)
  pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
  quality: 0.8, // 默认 0.92  图片质量 0-1
  toType: 'url', // 默认 url   支持: url、blob
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toImage 进度', percent);
  },
})
console.log('toImage', res);

模板参数

名称	类型	说明	备注
template	json	模板 json 数据
settingContainer	string	设置项对应的 html 容器	如: <div id="PrintElementOptionSetting"/>
paginationContainer	string	多面板容器(需要在页面添加对应 div )	如: <div class="hiprint-printPagination"/>
fields	array	fields 存在 元素字段则显示为下拉框显示 fields 不存在 元素字段则为输入框显示	此处设置为全局设置元素字段数据源，优先级低于 元素类型设置数据源
fontList	array	自定义下列选择的 字体列表	printTemplate.setFontList([]) 或元素中设置 options.fontList: []
dataMode	number	onDataChanged 返回 json 格式 1:getJson 其他：getJsonTid 默认 1
onDataChanged	(type, json)=>{}	模板发生改变时回调, 有些修改可能没有回调	新增、移动、删除、修改(参数调整)、大小、旋转等等
onUpdateError	(e)=>{}	printTemplate.update(json) 更新失败时回调	撤销重做使用的就是 update
onImageChooseClick	(target)=>{} )	图片地址选择回调	target.refresh(url,options) target.getValue()
onPanelAddClick	(panel,createPanel)=>{} )	多面板点击事件	target.refresh(url,options) target.getValue()
onFunctionClick	(option,printElement,event)=>{} )	函数点击事件(textarea点击回调)	target.refresh(url,options) target.getValue()
onZoomChange	(scale)=>{}	缩放回调缩放回调
customDataFun	(data,field,printData)=>{}	自定义获取 field 值自定义获取 field 值
beforeDragIn	(printTemplate,panel,printElement)=>{}	拖入元素之前回调,返回 false 阻止拖入

常用 Api

API	参数	说明	返回值	备注
getJson	无	返回 非配置版 模板 json	json	参数较完整
getTestData	无	返回 模板 json 中的 测试数据:	json	参数较完整
getJsonTid	无	返回 配置版 (把一些参数存在 provider 中,所以需要先 init 对应 provider) 模板 json	json	参数较少
clear	无	清空模板	无
rotatePaper	无	旋转纸张 -> 宽 => 高;高 => 宽	无
getOrient	无	获取纸张方向	1--纵向 2--横向
setPaper	width,height	设置模板纸张大小 setPaper(210,297) 内置纸张大小 只有 A1-A8 和 B1-B8 setPaper('A4')
zoom	scaleValue,save	缩放设计纸张 zoom(1.2) 缩放并保存(打印时也会缩放) zoom(1.2,true)
design	string, {grid:boolean,activePanel:boolean}	将模板渲染到指定容器中进行拖拽设计 design("#hiprint-printTemplate") {grid:true}显示网格 {activePanel:true}选中面板	无	调用之前需要能够获取到对应 DOM 容器
update	json	根据 json 模板更新 update(json)	无	可能更新失败可查看控制台 log
setElsAlign	string,toPaper	设置多选元素 左对齐 setElsAlign('left') 对齐纸张 setElsAlign('left',true) 可按住 ctrl/command 多个元素对齐纸张	无	left/vertical/right/top/horizontal/bottom/distributeHor/distributeVer
setElsSpace	number,isHor	设置多选元素 垂直间距 10 setElsSpace(10) 水平间距 10 setElsSpace(10,true)	无
updateOption	key,value	设置多选元素的 字体大小 12 updateOption('fontSize',12) 字体加粗 updateOption('fontWeight', 'bolder');	无	支持的参数在控制台输入 window.HIPRINT_CONFIG 查看 如: window.HIPRINT_CONFIG.text.tabs[0].options
getHtml	data,options,callback	获取打印 html getHtml({}) 批量获取打印 html getHtml([{},{}]) 定义打印左上偏移量 getHtml(data,{leftOffset:-1,topOffset:-1 })将覆盖面板偏移设置	html	paperNumberToggleInEven leftOffset topOffset
print	data,options,callbackOption	浏览器打印 print({}) 批量打印 print([{},{},{},{}]) 定义打印左上偏移量 print({},{leftOffset:-1,topOffset:-1 })将覆盖面板偏移设置 浏览器打印回调 print({},{},{callback:()=>{console.log('浏览器打印窗口已打开')}})	无	paperNumberToggleInEven leftOffset topOffset
print2	data,options	直接打印 print2({}) 批量打印 print2([{},{},{},{}]) 定义打印左上偏移量 print2({},{leftOffset:-1,topOffset:-1 })将覆盖面板偏移设置	无	paperNumberToggleInEven leftOffset topOffset
on	eventName,callback	直接打印回调 打印成功 on('printSuccess', function (data) { }) 打印失败 on('printError', function (data) { })	无
toImage (需先引入插件)	data,options	导出 图片 toImage({},{name:'download.jpg',isDowload:true}) 定义打印左上偏移量 toImage({},{leftOffset:-1,topOffset:-1 })将覆盖面板偏移设置	$.Deferred()	type: 'image/jpeg' quality: '0.8' toType: 'url'/'blob' isDownload:true
toPdf (需先引入插件)	data,fileName,options	导出 pdf toPdf({},"测试导出") 导出参数scale 越大 pdf 越清晰，文件越大 性能越差 默认 2 toPdf({},"测试导出",{scale:4}) 定义打印左上偏移量 toPdf({},"",{leftOffset:-1,topOffset:-1 })将覆盖面板偏移设置	$.Deferred()	scale isDownload
getPrinterList	无	返回 连接 打印客户端 时获取到的打印机列表	array	刷新获取打印机列表 这是异步的,需要已连接打印客户端 hiprint.refreshPrinterList((list) => {})
setFields	array	设置字段列表 setFields([{field:'name',text:'名称'}])	无	此处设置为全局设置元素字段数据源，优先级低于 元素类型设置数据源
getFields	无	获取字段列表	array
getFieldsInPanel	无	获取模板中 所有的 field	array
selectAllEls	boolean	选中所有元素(不能选中的元素除外: table) selectAllEls() 反选selectAllEls(true)	无
getSelectEls	无	获取选中元素列表	array
setFontList	array	设置可选字体列表 setFontList([{value:'SourceHanSansCN-Normal',title:'思源黑体'}])	无	需要本机已安装该字体
getFontList	无	获取字体列表	array
setPaperList	array	设置可选纸张列表 setPaperList([{ type: "A4", width: 210, height: 297 }])	无
getPaperList	无	获取纸张列表	array

其他 Api

API	参数	说明	返回值	备注
undo	无	撤销	无
redo	无	重做	无
copyJson	无	复制元素	[元素]
cutJson	无	剪切元素	无
canPaste	无	能否粘贴	boolean
getPrintStyle	index	获取打印打印样式 panels对应下标, 默认 0	string	查看打印样式是否正常纸张大小,纸张方向
getPaperType	index	获取打印纸张类型 panels对应下标, 默认 0	string
addPrintPanel	options	新增面板 addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 })	panel	多面板操作
printByHtml	html	打印 html printByHtml($('#Id').html())	无
printByHtml2	html	直接打印 html printByHtml2($('#Id').html())	无
getElementByName	elementName,panelIndex	获取元素 options.name == 'testName' 的打印组件 getElementByName(testName)	array	panelIndex多面板的下标 默认 0
getPrintElementSelectEventKey	无	获取模板 点击元素 事件 key	无
getBuildCustomOptionSettingEventKey	无	获取模板 点击空白 事件 key	无

自定义设计使用示例

注意

这里是使用 核心包 @sv-print/hiprint 的示例。是没有组件的方式。适用于想自定义 UI 的开发者。

<template>
  <!-- 这是 "可拖拽元素" 容器 拖拽它到 "拖拽设计器" 进行设计 -->
  <!-- !!! "可拖拽元素" 有两种 方式 !!! -->
  <div title="这是方式1,完全自定义元素样式" class="hiprintEpContainer">
    <!-- 必须包含 "ep-draggable-item" class -->
    <!-- defaultModule.text ==> provider 中 对应的 tid -->
    <a class="ep-draggable-item" tid="defaultModule.text">
      <p>文本</p>
    </a>
  </div>
  <div title="这是方式2,仅显示自定义元素的标题" class="hiprintEpContainer2"></div>
  <!-- 这是 "多面板" 容器 点击切换面板 -->
  <div class="hiprint-printPagination"></div>
  <!-- 这是 "拖拽设计器" 容器 -->
  <div id="hiprint-printTemplate"></div>
  <!-- 这是 "元素参数设置" 容器 -->
  <div id="PrintElementOptionSetting"></div>
</template>

<script>
  // <!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
  // <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/@sv-print/hiprint@latest/dist/print-lock.css">
  // <!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
  // <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

  // defaultElementTypeProvider -> 默认 provider ==> 可拖拽元素提供者 【关键信息 可拖拽元素唯一标识 "tid"】
  // "可拖拽元素" 方式1 就需要用到这个 "tid"
  import {hiprint, defaultElementTypeProvider} from "@sv-print/hiprint";

  export default {
    data() {
      return {
        printTemplate: null,
      };
    },
    mounted() {
      // 渲染部分都是填充到 对应 "容器" 中， 所以肯定需要能够获取到对应 DOM 后 操作。
      this.init();
    },
    methods: {
      init() {
        // 初始化 provider , 才能让 "可拖拽元素" 可正常拖拽 【因为要先去处理 provider 中的 "tid"】
        hiprint.init({
          providers: [new defaultElementTypeProvider()],
        });
        // 渲染 "可拖拽元素" 方式1, 包含 "tid" 元素 class 必须包含 "ep-draggable-item"
        hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
        // 渲染 "可拖拽元素" 方式2, 指定 "可拖拽元素" 容器
        $(".hiprintEpContainer2").empty(); // // 有时可能是第二次进入此页面, 所以需要先清空 "可拖拽元素" 容器
        // hiprintEpContainer2 => "可拖拽元素" 容器
        // defaultModule => provider 对应的 ElementTypes --> context.addPrintElementTypes("defaultModule",[])
        // 有时如果你发现你页面出现重复的 "可拖拽元素" 元素, 那么你需要 先移除"旧"的 ElementTypes --> context.removePrintElementTypes("defaultModule");
        hiprint.PrintElementTypeManager.build(".hiprintEpContainer2", "defaultModule");
        // 有时可能是第二次进入此页面, 所以需要先清空 "拖拽设计器" 容器
        $("#hiprint-printTemplate").empty();
        // 创建模板对象
        this.printTemplate = new hiprint.PrintTemplate({
          // "初始模板 json"
          template: {},
          // "元素参数设置" 容器
          settingContainer: "#PrintElementOptionSetting",
          // "多面板" 容器
          // 实现多面板， 需要在页面添加一个 <div class="hiprint-printPagination"/>
          // 不添加, 可不用下方代码, 如果没有对应 容器 写了也没用
          paginationContainer: ".hiprint-printPagination",
        });
        // 将模板渲染到 "拖拽设计器" 容器 中
        this.printTemplate.design("#hiprint-printTemplate", {grid: true, pagination: true, activePanel: true}); // grid: true ==> 显示网格 activePanel: true ==> 选中面板
        // 如果你只想打印, 那么 创建模板 对象 参数只需要 "初始模板 json" 然后调用 print/print2 即可
        // let printData = { text: "这是打印时显示的文本" };
        // this.printTemplate.print(printData)
      },
    },
  };
</script>