一种基于TinyMCE富文本的web端自定义打印方法技术

一种基于TinyMCE富文本的web端打印方法的方法，1)用户先在web端，选择自己需要的单据类型，支持13种单据类型，然后在TinyMCE富文本中设置自己需要的模板格式且覆盖现有主要的模板格式；2)用户在需要打印的详情页或列表页选中单据类型，点击打印，提供选择模板功能，选中自己设置好的模板，点击打印；3)将解析处理好的html结构和依赖的css3文件放到新生成的iframe中，本发明专利技术通过前端脚本语言JavaScript，实现了web端自定义打印功能，因为通过浏览器进行自定义打印，可以实现跨平台，包括支持window,Os系统等，只要是浏览器就能运行。

【技术实现步骤摘要】
一种基于TinyMCE富文本的web端自定义打印方法
本专利技术涉及计算机引擎与开发平台的前端开发

技术介绍
为了完成具有Saas的软件平台，如开发的产品是一种为各种类型的企业管理库存的一款Saas类型的互联网产品。因为是与企业的日常单据管理有所关联，所以相关的打印功能就有所要求，普通的页面打印越来越不满足广大公司产品使用者的需求，自定义打印功能需求应运而生。如被管理的产品的单据类型比较多，然而用户对于业务单据的打印有更多自定义需求，直接通过网页打印的单纯直接的功能不能满足用户的需要，对于业务单据，用户往往需要导出数据后通过其他文档编辑软件调整、处理数据显示格式再进行单据的打印，这样对用户的体验不是很好，对于产品而言，满足用户的需求是第一要务。为了解决这个痛点，现有的实现方案基本都不能解决现在的问题。早期的自定义打印要么是基于Java，通过后端调用电脑的打印模组进行自定义打印，但是支持的浏览器类型很少，除了早期的Ie8，之后的谷歌和火狐浏览器都不支持，且界面落后。要么是通过下载一个小插件安装，后方才可以自定义打印，且大部分对系统有要求，比如不兼容win10，macOS之类的。要么就是功能能用，对系统的要求也缓和很多，但是收费价格很高。欲解决此问题采用兼容的方法较好，兼容最好的办法就是通过可以实现跨平台的语言进行开发，对各种环境都有兼容性。那么通过JavaScript在浏览器进行功能开发，既能满足功能性又可以兼容各种系统，性能也有足够的保证。既然如此，就着手开发了基于TinyMCE富文本的web端打印功能。Tinymce为富文本编辑器，是一款全面易用的富文本编辑器，功能：修改后台默认编辑器为Tinymce,使用此插件时请禁用其他编辑器插件。而Nodejs是一个基于ChromeV8引擎的JavaScript运行环境，一个让JavaScript运行在服务端的开发平台，可用于方便地搭建响应速度快、易于扩展的网络应用。Node.js是一个对于前端工作者不可或缺的工具。尤其是对于JavaScript有着巨大的提升，Node.js在大部分领域都占有一席之地，尤其是I/O密集型的。如Web开发，微服务，前端构建等。不少大型网站都是使用Node.js作为后台开发语言的，用的最多的就是使用Node.js做前端渲染和架构优化。有不少知名的前端库也是使用Node.js开发的，如Webpack是一个强大的打包器，React/Vue是成熟的前端组件化框架。nodejs搭配baiMongoDB作后端；nodejs搭配“终端du”作前端的编zhi译工具使dao用；编辑一些小工zhuan具。但在打印上并无应用先例。
技术实现思路
为解决现有技术存在的问题，本专利技术的目的是，通过前端语言(JavaScript)，实现自定义打印模板功能，尤其是完成Saas的软件平台对企业的日常单据管理打印功能的完善。本专利技术的技术方案是，一种基于TinyMCE富文本的web端打印方法的方法，其特征是，步骤如下：步骤1：用户先在web端，选择自己需要的单据类型，支持13种单据类型分别为采购入库，销售退货，其它入库，盘点入库，调拨入库，生产入库，内部领用，盘点出库，销售出库，采购退货，其它出库，调拨出库，采购订单，销售订单，然后在TinyMCE富文本中设置自己需要的模板格式(覆盖现有主要的模板格式)，包括字体大小以及准备打印的纸张大小(A3-A6等)，设置好模板通过node对页面模板进行分类处理然后保存到存储模块；步骤2：用户在需要打印的详情页或列表页选中单据类型，点击打印，提供选择模板功能，选中自己设置好的模板，点击打印；通过获取模板的详情数据，对得到的数据进行解析分类处理，对图片做Base64位处理，通过新建canvas对象，设置canvas的长宽样式，通过canvas的绘画图片属性对图片进行字符串拆分，将图片进行64位处理；对模板里设置的字段和后端给的数据匹配归类，对表格里的数据进行一一分类处理；步骤3:将解析处理好的html结构和依赖的css3文件放到新生成的iframe中，然后调用window.print()完成指定样式模板的web端打印功能。HTML的标签元素就是DOM的元素节点,它提供了一份文档的结构。但这份文档本身不会包含任何内容,因此元素节点可以包含其他的节点。对需要特别处理的字段，如时间，图片字段。在对样式进行一一解析加入页面dom元素。css3文件指层叠样式表(英文全称:CascadingStyleSheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。基于TinyMCE富文本的web端打印方法，设置的自己需要的模板格式具体包含12个功能模板，每个功能模块相互依靠。有益效果，与现有技术相比，其显著优点：(1)本专利技术通过前端脚本语言JavaScript，实现了web端自定义打印功能，因为通过浏览器进行自定义打印，所以可以实现跨平台，包括支持window，MacOs系统等，并且对环境的要求并不是那么苛刻，只要是浏览器可以运行，那么就可以实现自定义打印功能，高效并且便捷，极大的方便用户使用。(2)因为是通过node做中间件，所以对系统的兼容性和对不同环境的适配性有着极高的优势，在系统运行中，永远的保持着软件的灵敏度，node底层是基于c++编写，单核心流程运行。尽管多核心在高并发的项目中速度具备优势，但在单核心流程运行中的单核心应用场景下，单核心较多核心有先天的速度优势。附图说明图1为本专利技术实施例中node请求的系统结构示意图。图2为与node核心模块对数据的分析的流程。图3所示是一个自定义打印模板实施例的流程图。具体实施方式图1为本专利技术实施中自定义模板方法实现的系统结构示意图前端模块组：这个模块主要是前端的一些脚本释放地，为各个功能提供触发器，给用户体验功能的入口，以及包括UI的样式和交互的体现都是在这个模块进行实现。设置好模板通过node对页面模板进行分类处理然后保存到数据库；如何工作的流程：Node核心模块组中，node模块主要处理的是对后端数据的一些处理，包括请求的类型，数据的格式，文体结构的大小等等，是处理和计算的核心区域，为数据更好的服务于前端模组而产生的模块。根据页面传递到node核心模块的汇总数据，先是获取当前传递的数据是哪种单据，根据单据类型匹配到存在node核心模块的字典模型，获取匹配模型后再对单据字段进行一一匹配分类，进行处理合并后存入存储模块。普通打印模型：这块主要是显示处理web浏览器自带的打印模块，通过window.print()调用，实现基础的打印功能。自定义打印模型：这块主要通过前端模组的处理，和node核心模块对数据的分析，然后将生成好的模板出入前端模块组进行打印处理，根据页面传递到node核心模块的汇总数据，先是获取当前传递的数据是哪种单据，根据单据类型获取存储在本文档来自技高网...

【技术保护点】
1.一种基于TinyMCE富文本的web端打印方法的方法，其特征是，步骤如下：步骤1：用户先在web端，选择自己需要的单据类型，支持13种单据类型分别为采购入库，销售退货，其它入库，盘点入库，调拨入库，生产入库，内部领用，盘点出库，销售出库，采购退货，其它出库，调拨出库，采购订单，销售订单，然后在TinyMCE富文本中设置自己需要的模板格式且覆盖现有主要的模板格式，包括字体大小以及准备打印的纸张大小，设置好模板通过node对页面模板进行分类处理然后保存到存储模块；/n步骤2：用户在需要打印的详情页或列表页选中单据类型，点击打印，提供选择模板功能，选中自己设置好的模板，点击打印；通过获取模板的详情数据，对得到的数据进行解析分类处理，对图片做Base64位处理，通过新建canvas对象，设置canvas的长宽样式，通过canvas的绘画图片属性对图片进行字符串拆分，将图片进行64位处理；对模板里设置的字段和后端给的数据匹配归类，对表格里的数据进行一一分类处理；/n步骤3:将解析处理好的html结构和依赖的css3文件放到新生成的iframe中，然后调用window.print()完成指定样式模板的web端打印功能。/n...

【技术特征摘要】
1.一种基于TinyMCE富文本的web端打印方法的方法，其特征是，步骤如下：步骤1：用户先在web端，选择自己需要的单据类型，支持13种单据类型分别为采购入库，销售退货，其它入库，盘点入库，调拨入库，生产入库，内部领用，盘点出库，销售出库，采购退货，其它出库，调拨出库，采购订单，销售订单，然后在TinyMCE富文本中设置自己需要的模板格式且覆盖现有主要的模板格式，包括字体大小以及准备打印的纸张大小，设置好模板通过node对页面模板进行分类处理然后保存到存储模块；
步骤2：用户在需要打印的详情页或列表页选中单据类型，点击打印，提供选择模板功能，选中自己设置好的模板，点击打印；通过获取模板的详情数据，对得到的数据进行解析分类处理，对图片做Base64位处理，通过新建canvas对象，设置canvas的长宽样式，通过canvas的绘画图片属性对图片进行字符串拆分，将图片进行64位处理；...

【专利技术属性】
技术研发人员：高志远，
申请(专利权)人：百卓网络科技有限公司，
类型：发明
国别省市：江苏;32