一种单证的在线打印预览方法与流程

1.本发明涉及计算机前端组件领域，具体为一种单证的在线打印预览方法。


背景技术：

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


技术实现要素：

5.本发明的目的是针对现有技术的缺陷，提供一种单证的在线打印预览方法，以解决上述背景技术提出的问题。
6.为实现上述目的，本发明提供如下技术方案：一种单证的在线打印预览方法，包括单证打印、单证预览编辑、单证模板制作导和导出单证，具体步骤如下：
7.s1：单证打印；
8.该方法是基于浏览器的打印方法，可对单证进行直接打印，支持多种格式用户在单证平台上即可完成对单证的浏览，预览以及打印操作，用户选中对应的单证进行打印，前端调用浏览器的打印方法即可直接打印；
9.s2：单证预览编辑；
10.用户可以对用户数据和单证数据内容进行选择，系统会根据内容到数据库中进行检索，至此用户无需再进行额外的输入即可完成单元格内容的编辑；用户可以导入图片并对图片进行编辑操作，可以设置为底图、水印和背景；
11.s3：单证模板制作；
12.用户可以在单证模板维护系统内新增单证模板、编辑单证模板和启用单证模板功能，模板制作提供智能分页模板；
13.s4：导出单证；
14.单证生成后支持导出单证，支持多种格式的文件类型如：excel、pdf和img；首先前端会从数据库中获取单证相关数据，随后对在浏览器内进行渲染，实现单证预览，预览时确保和单证打印后的效果完全一致，用户选择类型即可导出对应的单证。
15.作为本发明的一种优选技术方案，所述s1中单证打印的具体流程如下：
16.s11：首先根据用户选择，获取相应单证数据；
17.s12：canvas在可视区域内渲染，用户对打印单证进行预览；
18.s13：调用window.print对页面单证区域进行打印，创建隐藏的iframe，将完整的单证内容渲染到预览的canvas内，并将canvas放入iframe内，打开打印对话框；
19.s14：完成单证打印。
20.作为本发明的一种优选技术方案，所述s2还提供单元格行列的编辑方法，可以对行列进行增删改操作，对样式大小进行修改，会自动根据内容调整大小，并提供“缩放至一页”，“智能分页”功能；
21.如果单元格内容溢出，支持设置溢出单元格，自定义拼接内容，在指定单元格内显示由于溢出未显示的内容。
22.作为本发明的一种优选技术方案，所述溢出逻辑的具体流程如下：
23.s21：判断单元格内是否还有字符未显示剩余，如还有剩余则补充一个占位符；
24.s22：用户选择单元格，如果占位符为d，则表示是溢出的剩余部分，对其进行正则匹配和过滤操作，将剩余溢出内容显示在当前单元格内。
25.作为本发明的一种优选技术方案，所述s3中的智能分页具体流程有：
26.s31：创建空的canvas，使用node-canvas加载字体，渲染对应的文本并计算每个文字的宽度，根据各自的宽高进行计算，判断是否需要换行；
27.s32：智能分页模板首先获取溢出内容，页面高度和sheet高度数据进行计算；
28.s33：如果单证页数大于1，则开始进行智能分页计算；
29.s34：计算内容需要分页的循环次数，获取canvas的格子衡量数据；
30.s35：当单元格的最大行数大于页面初始边距时，计算页面溢出内容循环次数，根据循环次数来设置页数，渲染到预览的canvas内，实现智能分页。
31.s36：当页面内容小于一页时，无需分页。
32.作为本发明的一种优选技术方案，所述s4中导出excel的具体流程如下；
33.s411：获取sheet数据，图片信息等数据转换为excel数据；
34.s412：结合模板显示预览效果；
35.s413：调用浏览器进行导出。
36.作为本发明的一种优选技术方案，所述s4中导出pdf和导出img的具体流程如下；
37.s421：获取excel数据；
38.s422：导出格式设置为pdf，img完成导出。
39.本发明的有益效果是：本方法让用户可以选择数据库内存储的客户数据和单证数据等，直接在表单内单元格进行选择输入，无需用户需要对单证里面的内容进行逐个输入；还建立统一的单证元管理平台可以对单证进行管理、编辑和预览等操作；用户可以直接在平台内进行打印操作，还支持多格式文件。
附图说明
40.图1为本发明的单证的在线打印预览方案的流程图；
41.图2为本发明的单证导出的流程图。
具体实施方式
42.下面结合附图对本发明的较佳实施例进行详细阐述，以使本发明的优点和特征能更易被本领域人员理解，从而对本发明的保护范围做出更为清楚明确的界定。
43.实施例：请参阅图1-2，本发明提供一种技术方案：一种单证的在线打印预览方法，包括单证打印、单证预览编辑、单证模板制作导和导出单证，具体步骤如下：
44.s1：单证打印；
45.该方法是基于浏览器的打印方法，可对单证进行直接打印，支持多种格式用户在单证平台上即可完成对单证的浏览，预览以及打印操作，用户选中对应的单证进行打印，前端调用浏览器的打印方法即可直接打印；
46.单证打印的具体流程有：
47.s11：首先根据用户选择，获取相应单证数据；
48.s12：canvas在可视区域内渲染，用户对打印单证进行预览；
49.s13：调用window.print对页面单证区域进行打印，创建隐藏的iframe，将完整的单证内容渲染到预览的canvas内，并将canvas放入iframe内，打开打印对话框；
50.s14：完成单证打印；
51.本打印方法解决了使用浏览器打印容易出现的文字模糊以及图片异步的问题，解决了传统打印需要依赖用户客户端插件的问题；
52.具体的，文字模糊问题从出现是由于canvas将文字转为了图片，打印导致文字模糊；本方法在预览的canvas上放置遮罩层，将单证内的文字提取出来，根据原来的位置还原到遮罩层上，因此保证了文字的清晰可见；
53.图片异步问题是由于图片请求是异步的，无法在打印时使用图片，本方法预先读取图片内容，将其转为base64格式，再渲染回预览的canvas中，解决图片异步问题；
54.s2：单证预览编辑；
55.用户可以对用户数据和单证数据内容进行选择，系统会根据内容到数据库中进行检索，至此用户无需再进行额外的输入即可完成单元格内容的编辑；用户可以导入图片并对图片进行编辑操作，可以设置为底图、水印、背景等。
56.该方法还提供单元格行列的编辑方法，可以对行列进行增删改操作，对样式大小进行修改，会自动根据内容调整大小，并提供“缩放至一页”，“智能分页”功能；
57.如果单元格内容溢出，支持设置溢出单元格，自定义拼接内容，在指定单元格内显示由于溢出未显示的内容；
58.具体的溢出逻辑有：
59.s21：判断单元格内是否还有字符未显示剩余，如还有剩余则补充一个占位符。
60.s22：用户选择单元格，如果占位符为d，则表示是溢出的剩余部分，对其进行正则匹配和过滤操作，将剩余溢出内容显示在当前单元格内。
61.s3：单证模板制作；
62.单证模板制作类似单证预览编辑，用户可以在单证模板维护系统内新增单证模板、编辑单证模板和启用单证模板功能；
63.模板制作提供智能分页模板，智能分页具体流程有：
64.s31：创建空的canvas，使用node-canvas加载字体，渲染对应的文本并计算每个文字的宽度，根据各自的宽高进行计算，判断是否需要换行；
65.s32：智能分页模板首先获取溢出内容，页面高度和sheet高度数据进行计算；
66.s33：如果单证页数大于1，则开始进行智能分页计算；
67.s34：计算内容需要分页的循环次数，获取canvas的格子衡量数据；
68.s35：当单元格的最大行数大于页面初始边距时，计算页面溢出内容循环次数，根据循环次数来设置页数，渲染到预览的canvas内，实现智能分页。
69.s36：当页面内容小于一页时，无需分页；
70.s4：导出单证；
71.单证生成后支持导出单证，支持多种格式的文件类型，excel，pdf和img；首先前端会从数据库中获取单证相关数据，随后对在浏览器内进行渲染，实现单证预览，预览时确保和单证打印后的效果完全一致，用户选择类型即可导出对应的单证；
72.s41：导出excel；
73.s411：获取sheet数据，图片信息等数据转换为excel数据；
74.s412：结合模板显示预览效果；
75.s413：调用浏览器进行导出；
76.s42：导出pdf，导出img；
77.s421：获取excel数据；
78.s422：导出格式设置为pdf，img完成导出。
79.本方法让用户可以选择数据库内存储的客户数据和单证数据等，直接在表单内单元格进行选择输入，无需用户需要对单证里面的内容进行逐个输入；还建立统一的单证元管理平台可以对单证进行管理、编辑和预览等操作；用户可以直接在平台内进行打印操作，还支持多格式文件。
80.以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。