本发明涉及业务系统，尤其涉及一种web报表导出pdf的方法、装置及存储介质。
背景技术：
：：公司业务系统一般都具有报表的功能，用来进行数据的统计。通常情况下，报表都是在web(worldwideweb，网页)上显示的，在将报表导出并打印成书面的形式时，由于报表中存在的图表、表格，甚至树形机构时，在导出报表时，很容易出现错误，最终导致打印出的报表出现错误，通常需要人工进行调整或重新将图表、表格等在文件中画出来，造成报表导出效率低下，使得业务人员工作效率低下。技术实现要素：为了克服现有技术的不足，本发明的目的之一在于提供一种web报表导出pdf的方法，其能够解决现有技术中web页面中报表的导出需要人工操作进而导致导出效率低下等问题。本发明的目的之二在于提供一种web报表导出pdf的装置，其能够解决现有技术中web页面中报表的导出需要人工操作进而导致导出效率低下等问题。本发明的目的之三在于一种存储介质，其能够解决现有技术中web页面中报表的导出需要人工操作进而导致导出效率低下等问题。本发明的目的之一采用如下技术方案实现：一种web报表导出pdf的方法，所述方法包括：属性定义步骤：根据业务需求设定自定义属性，自定义属性如下表所示；插入属性步骤：当接收到导出指令时，根据业务需求在报表所对应的html文档中的对应标签中插入自定义属性，并为每个自定义属性赋值；克隆步骤：根据报表所对应的html文档中div标签的id值从html文档中获取所述div标签对应的dom节点，并根据dom节点新建克隆dom节点，同时将dom节点中所有的html标签内容赋值给克隆dom节点以及设置克隆dom节点在浏览器中的位置；第一计算步骤：根据标准a4纸张的尺寸以及克隆dom节点在导出时所占pdf页面的宽度计算得出克隆dom节点在导出时所占pdf页面的高度；所述pdf页面的尺寸为标准a4纸张的尺寸；克隆dom节点在导出时所占pdf页面的宽度从克隆dom节点所对应的div标签中获取；第二计算步骤：根据克隆dom节点获取自定义属性name＝paper的所有div标签所对应的dom子节点，然后根据每个dom子节点所对应的div标签的自定义属性margintop、marginbottom、page以及克隆dom节点在导出时所占pdf页面的高度分别计算出对应dom子节点在导出时所占pdf页面的高度；添加步骤：把克隆dom节点添加到浏览器的html文档的body标签中；画布创建步骤：根据dom节点的宽高以及画布缩放比例设定创建画布dom节点，并将画布dom节点在浏览器中的位置与克隆dom节点在浏览器中的位置保持一致；导出步骤：通过html2canvas函数把克隆dom节点的所有html标签的内容转换为画布dom节点中的图片数据，然后调用pdf插件将图片数据从浏览器中导出成pdf文件。进一步地，所述导出步骤还包括：当图片数据的高度小于或等于pdf页面的高度时，通过调用pdf插件将图片数据从浏览器中导出成pdf文件；当图片数据的高度大于pdf页面的高度时，执行裁剪步骤：首先创建与pdf页面尺寸相同的裁剪框，并将裁剪框在浏览器中的位置与与画布dom节点在浏览器的位置保持一致；然后将图片数据作为裁剪框的背景图片，并将裁剪框的背景图片的属性值设为norepeat；最后依次顺序改变裁剪框的背景图片在y轴上的值来获取裁剪框中的图片数据，并同时通过调用pdf插件将图片数据从浏览器中导出成pdf文件；每次改变裁剪框的背景图片在y轴上的值时按照pdf页面的高度为单位进行改变。进一步地，所述画布dom节点的高度＝画布缩放比例*dom节点的高度。进一步地，所述画布缩放比例为3。进一步地，当浏览器为chrome浏览器或firefox浏览器时，若画布dom节点的高度大于32767px时，依次将dom节点的高度减m后计算画布dom节点，直到画布dom节点的高度小于32767px；其中，m>0。进一步地，克隆dom节点在浏览器中的位置为浏览器的左上角。进一步地，页面高度计算步骤包括：首先根据标准a4纸张的宽高计算得出比例系数，然后根据比例系数和克隆dom节点在导出时所占pdf页面的宽度计算得出克隆dom节点在导出时所占pdf页面的高度；其中，比例系数＝标准a4纸张的宽度/标准a4纸张的高度。进一步地，每个dom子节点在导出时所占pdf页面的高度为：克隆dom节点导出时所占pdf页面的高度*page-margintop+marginbotton；其中，page、margintop、marginbotton分别为对应dom子节点所对应的div标签的自定义属性。本发明的目的之二采用如下技术方案实现：一种web报表导出pdf的装置，包括存储器和处理器，所述存储器上存储有可在处理器上运行的程序，所述程序为计算机程序，所述处理器执行所述计算机程序时实现如本发明目的之一采用的一种web报表导出pdf的方法的步骤。本发明的目的之三采用如下技术方案实现：一种存储介质，所述存储介质为计算机可读存储介质，其上存储有程序，所述程序为计算机程序，所述计算机程序被处理器执行时如本发明目的之一采用的一种web报表导出pdf的方法的步骤。相比现有技术，本发明的有益效果在于：本发明根据业务需求设定自定义属性，然后根据设定的自定义属性进行动态计算报表导出时所占用pdf页面的高度，进而使得web报表正确导出成pdf文件，大大提高了报表导出时的效率。附图说明图1为本发明提供的web页面中报表显示示意图；图2为本发明提供的pdf页面中报表显示示意图；图3为本发明提供的一种web报表导出pdf的方法流程图；图4为图3中步骤s8的流程图；图5为本发明提供的一种web报表导出pdf的装置模块图。图中：11、存储器；12、处理器；13、通信总线；14、网络接口。具体实施方式下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。实施例一为了解决业务系统中报表导出时效率低下的问题，本发明提供了一种web(worldwideweb，网页)报表导出pdf(portabledocumentformat)的方法，其采用纯前端且无第三方插件依赖的方法，实现了拿来即用、插拔式的组件库、web界面通过指定自定义html(hypertextmarkuplanguage，超文本标记语言)标签以及页眉页脚的高度、以a4纸张标准来划分web界面的报表显示效果，动态实现界面的分页渲染导出，实现了自动快速导出报表的功能。为了实现报表的导出，本发明还为html标签设置了自定义属性。在导出时，首先根据导出的效果将自定义属性插入到报表所对应的html文档的html标签中，然后在进行动态计算报表导出成pdf页面时的高度等，最终调用pdf插件将报表导出。另外，本文中所指的宽度、高度均为html文档在导出时对应标签渲染后在pdf页面中所占的宽度、高度。一般通过html标签的属性以及属性值进行标识。其中，如表1所示，本发明给出了本实施例的自定义属性：表1本实施例中的标准a4纸张的尺寸采用分辨率为72像素/英寸时，宽高分别为：595×842。本文中所指的标准a4纸张的尺寸均上述尺寸。另外，本发明自定义属性和现有的html标签的属性的在渲染时无差别，自定义属性均可应用于html标签，并在渲染时生效，用于报表导出。如图3所示，本发明提供了一优选的实施例，一种web报表导出pdf的方法，包括以下步骤：步骤s1、根据业务需求设定自定义属性。自定义属性如前述表1所示。步骤s2：当接收到导出指令时，根据业务需求在报表所对应的html文档中的对应标签中插入自定义属性，并为每个自定义属性赋值。其中，业务需求是指将报表导出时的具体效果，该效果可根据客户的需求进行设定。比如，可在报表预览界面中在相应的html标签中插入自定义属性。由于html标签渲染的特性来说，一般是以一个div标签为一个块进行渲染。因此，在报表导出时，也根据div标签进行区分。比如，当一个div标签所对应的dom节点导出时需要以标准a4纸张进行渲染时，就需要在该div标签中插入属性name＝paper，表示该div标签所代表的块在导出时占用一个pdf页面。另外，本申请中的pdf页面的尺寸也即是本文中所指的标准a4纸张的尺寸。这里的dom节点为原始的html文档中div标签所对应的dom节点。本发明通过对dom节点进行复制，然后在复制后的dom节点上进行动态计算导出时所渲染的高度，可避免在原始的html文档中的标签进行改变，影响原始的html文档的显示格式。再比如一个div标签所对应的dom节点导出时，需要以多张pdf页面显示时，将在该div标签中增加自定义属性page，其值为div标签在导出渲染时所占pdf页面的页数。另外，一般来说，报表在web界面显示时相邻两页内容是紧挨着的，但在word文档或pdf页面中每一页均具有页眉、页脚、空白等，而这些页眉、页脚也会占据相应的空间，如图1为web页面中报表内容的显示效果，如图2所示为word文档或pdf页面报表内容的显示效果，此时的报表内容导出时需要占用多个pdf页面。因此，为了能够将div标签对应的dom节点正确导出时，还需要在导出时所占用一页的div标签中插入自定义属性：margintop(上边距)、marginbottom(下边距)(如图2中的箭头所指的距离)。另外，对于margintop(上边距)、marginbottom(下边距)的数值可根据业务需求进行设置。比如，当一个报表放置于一页纸张时，设置其下边距为20，则此时可在该页所对应的div标签中整加自定义属性：marginbottom＝20。通过在报表所对应的html文档的div标签中加入这些自定义属性，在后续中就可以根据这些设定的自定义属性值进行动态地计算每个div标签所对应的dom节点在渲染、导出时的高度。另外，本实施例还给出了代码来具体说明下在div标签中插入自定义属性：如上所示，其中，name＝"paper"margintop＝"0"page＝"1"marginbottom＝"20"为新增加的自定义属性。步骤s3、根据报表所对应的html文档中div标签的id值从html文档中获取所述div标签对应的dom节点，并根据dom节点新建克隆dom节点，同时将dom节点中所有的html标签内容赋值给克隆dom节点以及设置克隆dom节点在浏览器中的位置。具体可通过document.getelementbyid("printdivid")获取id＝printdivid的div标签所对应的dom节点。本实施例中将克隆dom节点的位置设置在屏幕的左上角。比如在div标签中设置以下属性：position＝absolute，zindex＝-99999，top＝0，left＝0。其中，position是克隆dom节点在浏览器中的位置，其值absolute表示为绝对位置。zindex是克隆dom节点在浏览器中显示图层的值，值越大显示在最上层，越小在最底层，如果图层不透明，则会被隐藏不可见。步骤s4、根据标准a4纸张的尺寸以及克隆dom节点在导出时所占pdf页面的宽度计算得出克隆dom节点在导出时所占pdf页面的总高度；所述pdf页面的尺寸为标准a4纸张的尺寸。在计算克隆dom节点在导出时所占pdf页面的总高度时，首先通过标准a4纸张的宽高计算比例系数，然后根据克隆dom节点在对导出时所占pdf页面的宽度与比例系数计算得出克隆dom节点在导出时所占pdf页面的高度。其中，本文中的标准a4纸张的宽高分别为：595、841。因此，比例系数为：595/841。另外，本文中所指的标准a4纸张的宽高均为当分辨率为72像素/英寸时标准a4纸张的宽高。另外，克隆dom节点在导出时所占pdf页面的宽度从克隆dom节点所对应的div标签中获取。比如通过div标签中的属性值offsetwidth所述对应div标签在渲染时所占pdf页面的宽度，也即是div标签所对应的克隆dom节点在导出时所占pdf页面的宽度。步骤s5、根据克隆dom节点获取自定义属性name＝paper的所有div标签所对应的dom子节点，然后根据每个dom子节点所对应的div标签的自定义属性margintop、marginbottom、page以及克隆dom节点在导出时所占pdf页面的高度分别计算出对应dom子节点在导出时所占pdf页面的高度。由于报表所对应的dom节点中可能存在多个div标签，当某个div标签所对应的dom节点在导出时需要占用pdf页面时，会在该对应div标签添加自定义属性中name＝paper。也即是：当某个div标签有自定义属性name＝paper时，表示当前div标签所对应的dom节点在导出时需要用a4纸张，也即是说占用pdf页面。这样就可能出现一个报表在导出时占用多页pdf页面的情况。因此，为了保证报表对应的dom节点正确导出，因此还需要分别计算得出该报表所对应的dom节点所对应的div标签中的div子标签导出所在pdf页面的高度。根据克隆dom节点获取自定义属性name＝paper的所有div标签所对应的dom子节点，然后分别计算每个dom子节点在导出时所占pdf页面的高度。其中，page表示所占pdf页面的页数，margintop表示所占pdf页面的上边距，marginbottom表示所占pdf页面的下边距。具体地，每个div标签所对应的dom子节点在导出时所占pdf页面的高度＝克隆dom节点在导出时所占pdf页面的高度*page-margintop+marginbotton。比如，当page＝2时，dom子节点在导出时所在pdf页面的真实高度＝克隆dom节点在导出时所在pdf页面的高度*2-上边距+下边距。在导出pdf时所占pdf的页面的高度。由于这里的每个dom子结点均可以为后继各个dom子节点在渲染生成图片做准备。步骤s6、把克隆dom节点添加到浏览器的html文档的body标签中。一般来说，根据方法div.childnodes.add()将克隆dom节点添加到浏览器的html文档的body元素(标签)中。其中，body元素定义了文档的主体，其包括文档的所有内容，比如文本、超了解、图像、表格和列表等。步骤s7、创建一个画布dom节点，并将画布dom节点在浏览器的位置与克隆dom节点在浏览器中的位置保持一致。由于克隆dom节点在浏览器中的位置为浏览器的左上角，因此，也将画布dom节点在浏览器的位置也设置在浏览器的左上角。另外，画布dom节点的宽高是根据dom节点的宽高以及画布缩放比例进确定的。其中，画布dom节点的宽度为dom节点的宽度。画布dom节点的高度＝dom节点的高度*画布缩放比例。一般来说，画布缩放比例默认为3。但是，由于chrome浏览器、firefox浏览器一般将画布的高度限制在32767px。当浏览器为chrome浏览器或firefox浏览器时，本实施例所创建的画布dom节点的高度不能大于32767px。也即是画布缩放比例*dom节点的高度<32767px。因此，当画布缩放比例的默认值3*原始dom的高度小于或等于32767px，那么此时画布缩放比例为3。当画布缩放比例的默认值3*原始dom的高度大于32767px，则依次将dom节点的高度减预设值得出新的原始dom的高度，然后每次计算并判断3*新的原始dom的高度与32767px的大小，直到计算得出的结果小于32767px。其中，预设值一般为0.1。当浏览器为其他浏览器时，则直接将画布缩放比例默认为3即可。步骤s8、通过html2canvas函数把克隆dom节点的所有html标签的内容转换为画布dom节点中的图片数据，然后调用pdf插件将图片数据从浏览器中导出成pdf文件。也即是说，通过调用函数html2canva()将html文本内容转换为图片数据并放置于画布中。然后，在将图片数据从浏览器中导出成pdf文件时，通过调用pdf插件中的函数pdf.save()将图片数据从浏览器中导出成pdf文件。另外，由于本申请中的生成的图片数据是整个dom节点，因此，当dom节点在导出时需要以多页pdf显示时，其图片数据的高度必要会大于pdf页面的高度，若此时，直接调用pdf插件生成pdf文件时，会使得图片数据部分丢失，因此，在导出pdf文件时，还需要对图片的数据的高度进行判断。也即是：当图片数据的高度小于或等于一个pdf页面的高度时，直接通过pdf插件生成将图片数据从浏览器中导出成pdf即可。当图片数据的高度大于一个pdf页面的高度时，在导出时，可能导致数据丢失，因此需要对图片数据进行裁剪，将其裁剪成多个图片，并放置于多个pdf页面中。如图4所示，本发明给出了具体的裁剪过程：步骤s81、创建与pdf页面尺寸相同的裁剪框，并将裁剪框在浏览器中的位置与与画布dom节点在浏览器的位置保持一致。比如以div标签来表示一个裁剪框，然后根据pdf页面尺寸以及在画布dom节点在浏览器中的位置设该div标签的属性值。步骤s82、将图片数据作为裁剪框的背景图片，并将裁剪框的背景图片的属性值设为norepeat。步骤s83、依次顺序改变裁剪框的背景图片在y轴上的值来获取裁剪框中的图片数据，并同时通过调用pdf插件将图片数据从浏览器中导出成pdf文件；每次改变裁剪框的背景图片在y轴上的值时按照pdf页面的高度为单位进行改变。也即是通过改变div标签的backgroundpositiony属性的值来调制背景图片在裁剪框中的位置。通过以pdf页面的高度为单位顺序改变背景图片在裁剪框中的位置，因此，每次改变后得到的当前裁剪框内的图片数据均为一页pdf页面的内容。也即是说，当报表的内容通过一个页面不能显示时，需要通过裁剪器把生成的cancas图片进行裁剪，最终将多个canvas图片保存成一个pdf文件。实施例二本发明提供了一种web报表导出pdf的装置。如图5所示，本发明一实施例提供的web报表导出pdf的装置的内部结构示意图。在本实施例中，web报表导出pdf的装置可以是pc(personalcomputer，个人电脑)，也可以是智能手机、平板电脑、便携计算机等终端设备。该web报表导出pdf的装置至少包括：处理器12、通信总线13、网络接口14以及存储器11。其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是web报表导出pdf的装置的内部存储单元，例如该web报表导出pdf的装置的硬盘。存储器11在另一些实施例中也可以是web报表导出pdf的装置的外部存储设备，例如web报表导出pdf的装置上配备的插接式硬盘，智能存储卡(smartmediacard，smc)，安全数字(securedigital，sd)卡，闪存卡(flashcard)等。进一步地，存储器11还可以既包括web报表导出pdf的装置的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于web报表导出pdf的装置的应用软件及各类数据，例如web报表导出pdf的程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。处理器12在一些实施例中可以是一中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行web报表导出pdf的程序等。通信总线13用于实现这些组件之间的连接通信。网络接口14可选的可以包括标准的有线接口、无线接口(如wi-fi接口)，通常用于在该web报表导出pdf的装置与其他电子设备之间建立通信连接。可选地，该web报表导出pdf的装置还可以包括用户接口，用户接口可以包括显示器(display)、输入单元比如键盘(keyboard)，可选的用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是led显示器、液晶显示器、触控式液晶显示器以及oled(organiclight-emittingdiode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在web报表导出pdf的装置中处理的信息以及用于显示可视化的用户界面。图5仅示出了具有组件11-14以及web报表导出pdf的程序的web报表导出pdf的装置，本领域技术人员可以理解的是，图5示出的结构并不构成对web报表导出pdf的装置的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。在图5所示的web报表导出pdf的装置实施例中，存储器11中存储有web报表导出pdf的程序；处理器12执行存储器11中存储的web报表导出pdf的程序时实现如下步骤：步骤s1：根据业务需求设定自定义属性；其中，自定义属性如表1所示。步骤s2：当接收到导出指令时，根据业务需求在报表所对应的html文档中的对应标签中插入自定义属性，并为每个自定义属性赋值；步骤s3：根据报表所对应的html文档中div标签的id从html文档中获取所述div标签对应的dom节点，并根据dom节点新建克隆dom节点，同时将dom节点中所有的html标签内容赋值给克隆dom节点以及设置克隆dom节点在浏览器中的位置；步骤s4：根据标准a4纸张的尺寸以及克隆dom节点在导出时所占pdf页面的宽度计算得出克隆dom节点在导出时所占pdf页面的高度；所述pdf页面的尺寸为标准a4纸张的尺寸；克隆dom节点在导出时所占pdf页面的宽度从克隆dom节点所对应的div标签中获取；步骤s5：根据克隆dom节点获取自定义属性name＝paper的所有div标签所对应的dom子节点，然后根据每个dom子节点所对应的div标签的自定义属性margintop、marginbottom、page以及克隆dom节点在导出时所占pdf页面的高度分别计算出对应dom子节点在导出时所占pdf页面的高度；步骤s6：把克隆dom节点添加到浏览器的html文档的body标签中；步骤s7：根据dom节点的宽高以及画布缩放比例设定创建画布dom节点，并将画布dom节点在浏览器中的位置与克隆dom节点在浏览器中的位置保持一致；步骤s8：通过html2canvas函数把克隆dom节点的所有html标签的内容转换为画布dom节点中的图片数据，然后调用pdf插件将图片数据从浏览器中导出成pdf文件。实施例三本发明还提供了一种存储介质，所述存储介质为计算机可读存储介质，其上存储有web报表导出pdf的程序，所述web报表导出pdf的程序为计算机程序，所述web报表导出pdf的程序被处理器执行时实现以下步骤：步骤s1：根据业务需求设定自定义属性；其中，自定义属性如表1所示。步骤s2：当接收到导出指令时，根据业务需求在报表所对应的html标签中插入自定义属性，并为每个自定义属性赋值；步骤s3：根据报表所对应的html文档中div标签的id从html文档中获取所述div标签对应的dom节点，并根据dom节点新建克隆dom节点，同时将dom节点中所有的html标签内容赋值给克隆dom节点以及设置克隆dom节点在浏览器中的位置；步骤s4：根据标准a4纸张的尺寸以及克隆dom节点在导出时所占pdf页面的宽度计算得出克隆dom节点在导出时所占pdf页面的高度；所述pdf页面的尺寸为标准a4纸张的尺寸；克隆dom节点在导出时所占pdf页面的宽度从克隆dom节点所对应的div标签中获取；步骤s5：根据克隆dom节点获取自定义属性name＝paper的所有div标签所对应的dom子节点，然后根据每个dom子节点所对应的div标签的自定义属性margintop、marginbottom、page以及克隆dom节点在导出时所占pdf页面的高度分别计算出对应dom子节点在导出时所占pdf页面的高度；步骤s6：把克隆dom节点添加到浏览器的html文档的body标签中；步骤s7：根据dom节点的宽高以及画布缩放比例设定创建画布dom节点，并将画布dom节点在浏览器中的位置与克隆dom节点在浏览器中的位置保持一致；步骤s8：通过html2canvas函数把克隆dom节点的所有html标签的内容转换为画布dom节点中的图片数据，然后调用pdf插件将图片数据从浏览器中导出成pdf文件。上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。当前第1页12当前第1页12