一种单证的在线打印预览方法技术

本发明专利技术公开了一种单证的在线打印预览方法，包括单证打印，单证预览编辑，单证模板制作和导出单证；S1：单证打印可以直接在平台上进行打印以及预览操作；S2：单证预览编辑，用户可以对单证进行预览编辑操作，对单元格内的数据进行编辑输入，直接选择数据库内相关的用户数据，单证数据等，根据需求对单元格内的样式进行修改，可以将图片设置为背景、水印等；S3：单证模板制作，用户可以自行设计单证模板，以供后期使用；S4：单证都可以进行多种格式的导出操作，支持excel、pdf、img等；本方法让用户可以选择数据库内存储的客户数据和单证数据等，直接在表单内单元格进行选择输入，无需用户需要对单证里面的内容进行逐个输入。对单证里面的内容进行逐个输入。

【技术实现步骤摘要】
一种单证的在线打印预览方法


[0001]本专利技术涉及计算机前端组件领域，具体为一种单证的在线打印预览方法。

技术介绍

[0002]随着互联网的蓬勃发展，传统单证的管理模式和制作方式已不再适用；目前电子单证生成方式种类繁多，有基于word，WPS相关工具进行生成，有基于单证生成平台进行生成等等，但这些方式仍然需要用户对每一个表单内容进行输入，并且电子单证的存储尚未统一，有存储在本地电脑上、服务器等等，存储方式不同且凌乱不利于单证的检索管理。目前很多单证打印单证打印需要手工下载到本地，然后通过本地软件比如WPS、PDFelement，word等软件打印，或者通过浏览器打开后进行预览打印。可见，现有技术方案对PDF电子发票版式文件打印时，均需要手工下载至本地进行打印，无法在直接对电子发票进行单张或批量打印，打印过程繁琐。
[0003]中国专利申请CN 107450869 B公开了一种PDF电子发票版式文件的在线打印系统及方法，在本方案中，可实现在线对PDF文件进行打印。然而上述方法仅支持pdf格式，并不支持其他格式。
[0004]因此现有技术需要一种根据用户数据来生成单证的方法，来处理单证数据内容生成、格式处理和图片设置，并且需要一个存储单证又同时可以进行编辑浏览的平台，可以在平台上直接打印单证，为此提供了一种单证的在线打印预览方法。

技术实现思路

[0005]本专利技术的目的是针对现有技术的缺陷，提供一种单证的在线打印预览方法，以解决上述
技术介绍
提出的问题。
[0006]为实现上述目的，本专利技术提供如下技术方案：一种单证的在线打印预览方法，包括单证打印、单证预览编辑、单证模板制作导和导出单证，具体步骤如下：
[0007]S1：单证打印；
[0008]该方法是基于浏览器的打印方法，可对单证进行直接打印，支持多种格式用户在单证平台上即可完成对单证的浏览，预览以及打印操作，用户选中对应的单证进行打印，前端调用浏览器的打印方法即可直接打印；
[0009]S2：单证预览编辑；
[0010]用户可以对用户数据和单证数据内容进行选择，系统会根据内容到数据库中进行检索，至此用户无需再进行额外的输入即可完成单元格内容的编辑；用户可以导入图片并对图片进行编辑操作，可以设置为底图、水印和背景；
[0011]S3：单证模板制作；
[0012]用户可以在单证模板维护系统内新增单证模板、编辑单证模板和启用单证模板功能，模板制作提供智能分页模板；
[0013]S4：导出单证；
[0014]单证生成后支持导出单证，支持多种格式的文件类型如：excel、pdf和img；首先前端会从数据库中获取单证相关数据，随后对在浏览器内进行渲染，实现单证预览，预览时确保和单证打印后的效果完全一致，用户选择类型即可导出对应的单证。
[0015]作为本专利技术的一种优选技术方案，所述S1中单证打印的具体流程如下：
[0016]S11：首先根据用户选择，获取相应单证数据；
[0017]S12：canvas在可视区域内渲染，用户对打印单证进行预览；
[0018]S13：调用window.print对页面单证区域进行打印，创建隐藏的iframe，将完整的单证内容渲染到预览的canvas内，并将canvas放入iframe内，打开打印对话框；
[0019]S14：完成单证打印。
[0020]作为本专利技术的一种优选技术方案，所述S2还提供单元格行列的编辑方法，可以对行列进行增删改操作，对样式大小进行修改，会自动根据内容调整大小，并提供“缩放至一页”，“智能分页”功能；
[0021]如果单元格内容溢出，支持设置溢出单元格，自定义拼接内容，在指定单元格内显示由于溢出未显示的内容。
[0022]作为本专利技术的一种优选技术方案，所述溢出逻辑的具体流程如下：
[0023]S21：判断单元格内是否还有字符未显示剩余，如还有剩余则补充一个占位符；
[0024]S22：用户选择单元格，如果占位符为d，则表示是溢出的剩余部分，对其进行正则匹配和过滤操作，将剩余溢出内容显示在当前单元格内。
[0025]作为本专利技术的一种优选技术方案，所述S3中的智能分页具体流程有：
[0026]S31：创建空的canvas，使用node
‑
canvas加载字体，渲染对应的文本并计算每个文字的宽度，根据各自的宽高进行计算，判断是否需要换行；
[0027]S32：智能分页模板首先获取溢出内容，页面高度和sheet高度数据进行计算；
[0028]S33：如果单证页数大于1，则开始进行智能分页计算；
[0029]S34：计算内容需要分页的循环次数，获取canvas的格子衡量数据；
[0030]S35：当单元格的最大行数大于页面初始边距时，计算页面溢出内容循环次数，根据循环次数来设置页数，渲染到预览的canvas内，实现智能分页。
[0031]S36：当页面内容小于一页时，无需分页。
[0032]作为本专利技术的一种优选技术方案，所述S4中导出excel的具体流程如下；
[0033]S411：获取sheet数据，图片信息等数据转换为excel数据；
[0034]S412：结合模板显示预览效果；
[0035]S413：调用浏览器进行导出。
[0036]作为本专利技术的一种优选技术方案，所述S4中导出pdf和导出img的具体流程如下；
[0037]S421：获取excel数据；
[0038]S422：导出格式设置为pdf，img完成导出。
[0039]本专利技术的有益效果是：本方法让用户可以选择数据库内存储的客户数据和单证数据等，直接在表单内单元格进行选择输入，无需用户需要对单证里面的内容进行逐个输入；还建立统一的单证元管理平台可以对单证进行管理、编辑和预览等操作；用户可以直接在平台内进行打印操作，还支持多格式文件。
附图说明
[0040]图1为本专利技术的单证的在线打印预览方案的流程图；
[0041]图2为本专利技术的单证导出的流程图。
具体实施方式
[0042]下面结合附图对本专利技术的较佳实施例进行详细阐述，以使本专利技术的优点和特征能更易被本领域人员理解，从而对本专利技术的保护范围做出更为清楚明确的界定。
[0043]实施例：请参阅图1
‑
2，本专利技术提供一种技术方案：一种单证的在线打印预览方法，包括单证打印、单证预览编辑、单证模板制作导和导出单证，具体步骤如下：
[0044]S1：单证打印；
[0045]该方法是基于浏览器的打印方法，可对单证进行直接打印，支持多种格式用户在单证平台上即可完成对单证的浏览，预览以及打印操作，用户选中对应的单证进行打印，前端调用浏览器的打印方法即可直接打印；
[0046]单证打印的具体流程有：
[0047]S11：首先根据用户选择，获取相应单证数据；
[本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种单证的在线打印预览方法，包括单证打印、单证预览编辑、单证模板制作导和导出单证，其特征在于：具体步骤如下：S1：单证打印；该方法是基于浏览器的打印方法，可对单证进行直接打印，支持多种格式用户在单证平台上即可完成对单证的浏览，预览以及打印操作，用户选中对应的单证进行打印，前端调用浏览器的打印方法即可直接打印；S2：单证预览编辑；用户可以对用户数据和单证数据内容进行选择，系统会根据内容到数据库中进行检索，至此用户无需再进行额外的输入即可完成单元格内容的编辑；用户可以导入图片并对图片进行编辑操作，可以设置为底图、水印和背景；S3：单证模板制作；用户可以在单证模板维护系统内新增单证模板、编辑单证模板和启用单证模板功能，模板制作提供智能分页模板；S4：导出单证；单证生成后支持导出单证，支持多种格式的文件类型如：excel、pdf和img；首先前端会从数据库中获取单证相关数据，随后对在浏览器内进行渲染，实现单证预览，预览时确保和单证打印后的效果完全一致，用户选择类型即可导出对应的单证。2.根据权利要求1所述的一种单证的在线打印预览方法，其特征在于：所述S1中单证打印的具体流程如下：S11：首先根据用户选择，获取相应单证数据；S12：canvas在可视区域内渲染，用户对打印单证进行预览；S13：调用window.print对页面单证区域进行打印，创建隐藏的iframe，将完整的单证内容渲染到预览的canvas内，并将canvas放入iframe内，打开打印对话框；S14：完成单证打印。3.根据权利要求1所述的一种单证的在线打印预览方法，其特征在于：所述S2还提供单元格行列的编辑方法，可以对行列进行增删改操作，对样式大小进行修改，会自动根据内容调整大小，并提供“缩放至一页”，“...

【专利技术属性】
技术研发人员：黄凯，
申请(专利权)人：上海汇航捷讯网络科技有限公司，
类型：发明
国别省市：