CN111177602A - 一种对网页内容进行分页排版的方法及系统 - Google Patents

Abstract

本发明公开了一种对网页内容进行分页排版的方法及系统，涉及网页内容处理技术领域。所述对网页内容进行分页排版的方法及系统，将需要排版的内容分成多个排版块，在页面上设置多个页面块，再将排版块放置在页面块上，并在页面块上对排版块进行拖拽操作，即实现了对网页内容的分页排版，每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的网页内容，实现了用户所见即所得的分页效果，打破了浏览器网页分页的限制。

Description

一种对网页内容进行分页排版的方法及系统

技术领域

本发明属于网页内容处理技术领域，尤其涉及一种对网页内容进行分页排版的方法及系统。

背景技术

纸质书籍试卷等排版一般是借助于一些专业排版软件(例如microsoft office，方正软件，LaTeX)，但是对于很多普通用户来说，这些排版软件门槛高。由于浏览器网页本身特性的制约，网页内容排版并不能像排版软件一样用户能够在网页上直接进行。浏览器网页内容本身是能够分页的，但是这种分页只有在点击打印预览时才能看到，用户在浏览页面内容时能看到的是无限高的页面，并不清楚分页后的效果，即用户没法直观地看到浏览器网页内容的分页。浏览器网页内容分页的显示方式无法让用户实现自由排版。

发明内容

针对现有技术的不足，本发明提供一种对网页内容进行分页排版的方法及系统，以解决浏览器网页内容能分页但不可见，用户无法自由排版的问题。

本发明是通过如下的技术方案来解决上述技术问题的：一种对网页内容进行分页排版的方法，包括以下步骤：

步骤1：将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为多个排版块，设置每个排版块的属性参数；

步骤2：根据H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块；

步骤3：根据每个排版块的属性参数，将多个排版块分别放置在对应页面块的对应位置上；

步骤4：对页面块上的排版块进行拖拽实现自由排版，每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的网页内容。

本发明所述的对网页内容进行分页排版的方法，将需要排版的内容划分成多个排版块，再在页面上设置多个页面块(页面块的尺寸可以由用户来设置)，根据每个排版块的属性参数可以计算得到该排版块应放置在哪个页面块的哪个位置，最后对页面块上的排版块进行拖拽实现了自由排版，自由排版后每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的内容，该方法通过页面块实现了网页内容的分页，而在页面块上对排版块进行拖拽实现了网页内容的自由排版，从而实现了用户在网页页面上所见到的即为分页排版后的网页内容，打破了浏览器网页分页的限制。

进一步地，所述步骤1中，排版块的属性参数包括排版块所占据的高度、排版块的留空高度、优先级、是否强制该排版块与下一个排版块同一页面块、是否强制该排版块重起一个页面块、以及是否可拖拽。

进一步地，所述步骤3的具体操作为：

步骤3.1：设第i个排版块的留空高度的初始值为该排版块的留空高度的最小值，即blockList[i].margin＝blocklist[i].space[0]，blockList[i].margin为第i个排版块的留空高度的初始值，blocklist[i].space[0]为第i个排版块的留空高度的最小值；

步骤3.2：当

且

时，前k-1个排版块在第一个页面块排版后剩余空白的高度

其中，minH[i]为第i个排版块所占据的高度的最小值，pageHeight[1]为第一个页面块的高度；

步骤3.3：将剩余空白平均分配给该k-1个排版块中优先级最高的t个排版块，t∈k-1，j∈t，则第j个排版块的留空高度blockList[j].margin＝blocklist[j].space[0]+lastSpace[1]/t；

步骤3.4：根据步骤3.3设置第一个页面块中k-1个排版块的留空高度，完成第一个页面块的排版；

步骤3.5：重复步骤3.1至3.4，从第k个排版块开始进行第二个页面块的排版，依次类推，直到完成所有排版块在页面块的排版，即完成多个排版块在对应页面块对应位置上的放置。

进一步地，所述步骤3.3中，当第j个排版块的留空高度

blockList[j].margin＞blocklist[j].space[1]时，设该排版块的留空高度

blockList[j].margin＝blocklist[j].space[1]，则剩余空白的高度

lastSpace[1]＝lastSpace[1]-(blocklist[j].space[1]-blocklist[j].space[0])×t，再继续在该k-1个排版块中寻找优先级次之的排版块，将剩余空白平均分配优先级次之的排版块，依次类推，继续进行剩余空白的分配；

其中，blocklist[j].space[1]为第j个排版块的留空高度的最大值。

进一步地，当k-1个排版块均已分配，且还有剩余空白没有被分配完时，则再次选择优先级最高的排版块，强行将剩余空白分配给优先级最高的排版块。

进一步地，所述步骤4中，拖拽的具体操作为：

步骤4.1：点击待拖拽的排版块，获得点击处的坐标为x₁,y₁；

步骤4.2：移动光标至目标位置，获得目标位置的坐标为x₂,y₂，则目标位置与点击处的高度差为Δh1＝y₂-y₁；

步骤4.3：判断blockList[i-1].margin+Δh1是否小于0，如果是，则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝0，否则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝blockList[i-1].margin+Δh1，

其中，blockList[i-1]为该排版块的上一个排版块。

进一步地，所述方法还包括步骤5：对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示，解决了由于页眉页脚之类元素的存在，导致浏览器页面无法将一个排版块同时渲染在两个页面块的问题。

进一步地，采用js算法判断排版块是否为跨页面块，具体操作为：

步骤5.11：获取待判断排版块的起始位置、结束位置，以及该排版块所在的页面块的高度pageHeight；

步骤5.12：判断

与

是否相等，如果相等，则该排版块在同一页面块中，否则，该排版块为跨页面块的排版块；

其中，blocklist[i].start、blocklist[i].end分别为该排版块的起始位置和结束位置，

为向上取整。

进一步地，采用部分显示部分隐藏的方式实现排版块分页显示的具体操作为：

步骤5.21：将每个页面块的css样式中设置overflow:hidden，即每个页面块中超出该页面块的部分被遮挡，当跨页面块的排版块处于当前页面块的末尾处时，超出当前页面块的部分被遮挡；

步骤5.22：将该排版块复制，并放置在当前页面块的下一个页面块的开头处；

步骤5.23：计算该排版块在当前页面块中显示高度Δh2＝pageHeight-blocklist[i].start，其中，pageHeight为当前页面块的高度，blocklist[i].start为该排版块的起始位置；

步骤5.24：在下一个页面块中，将包括该排版块的所有排版块均向上移动Δh2，即实现该排版块的分页显示。

相应的，一种对网页内容进行分页排版的系统，其特征在于，包括：

排版划分模块，用于将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为多个排版块，设置每个排版块的属性参数；

页面块设置模块，用于根据排版划分模块中H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块；

排版块放置模块，用于根据排版划分模块中每个排版块的属性参数，将多个排版块分别放置在页面块设置模块中设置的对应页面块的对应位置上；

分页排版显示模块，用于对页面块上的排版块进行拖拽实现自由排版，并显示每个页面块自由排版后的内容；

跨页显示模块，用于对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示。

有益效果

与现有技术相比，本发明提出的一种对网页内容进行分页排版的方法，将需要排版的内容分成多个排版块，在页面上设置多个页面块，再将排版块放置在页面块上，并在页面块上对排版块进行拖拽操作，即实现了对网页内容的分页排版，每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的网页内容，实现了用户所见即所得的分页效果，打破了浏览器网页分页的限制。

该方法还可以将同一个排版块同时渲染在两个页面块上，解决了由于页眉页脚之类元素的存在，导致浏览器页面无法将一个排版块同时渲染在两个页面块的问题。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一个实施例，对于本领域普通技术人员来说，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例中分页后部分网页内容示意图；

图2是本发明实施例中存在跨页面块的排版块的部分网页内容示意图。

具体实施方式

下面结合本发明实施例中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明所提供的一种对网页内容进行分页排版的方法，包括以下步骤：

1、将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为n个排版块(每个排版块均为HTML元素)，设置每个排版块的属性参数。

将需要排版的内容渲染在H5页面上是现有技术，即将需要排版的内容拆解成多个元素，然后将这些元素转换成HTML5格式元素，显示在H5页面上。

每个排版块可以根据内容分为多个类型，例如可分为主标题、副标题、模块名称(某个次级标题)、家庭作业(某个次级标题)、填空题、选择题、解答题等；每个排版块包括多个属性参数，具体的属性参数有：排版块所占据的高度、排版块的留空高度、优先级、是否强制该排版块与下一个排版块同一页面块、是否强制该排版块重起一个页面块、以及是否可拖拽等等。例如：

主标题：{space:[1,2]，weight:5，cont:false,newPage:true，dargabel:false}

填空题：{space:[5,50]，weight:2，cont:false,newPage:false，dargabel:false}

解答题：{space:[20,200]，weight:1，cont:false,newPage:false，dargabel:true}

家庭作业：{space:[20,200]，weight:5，cont:true,newPage:true，dargabel:false}

其中，解答题的space为[20,200]，代表解答题类型的排版块的留空高度的最小值为20px，最大值为200px，weight:1表示优先级的等级，cont表示是否强制该排版块与下一个排版块处于同一页面块，newPage表示是否强制该排版块重起一页，dargabel表示该排版块是否可以拖拽。排版块的属性参数均有默认设置，只有当用户需要改变属性参数时，才需要去选择设置属性参数，提高了分页排版的效率。

2、根据H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块。

页面块的数量和尺寸根据页面的高度和宽度由用户来确定。

3、根据每个排版块的属性参数，将多个排版块分别放置在对应页面块的对应位置上。

用blockList来表示n个排版块，blockList[i].height表示第i个排版块的高度，第i个排版块所占据的高度等于第i个排版块的高度blockList[i].height加上第i个排版块的留空高度blockList[i].margin(在首次排版时，按照最小的留空高度来)，用pageHeight[i]来表示第i个页面块的高度。如果存在跨页面块的排版块，由于该排版块的部分内容显示在该页面块上，部分的部分内容显示在该页面块外，需要将该排版块移到下一个页面块的开头处，那么当前页面块中多出空白位置，为了美观，需要将这些空白位置分配给该页面块中的排版块，因此将多个排版块分别放置在对应页面块的对应位置上的操作实际上就是空白位置的分配操作，具体操作为：

3.1设第i个排版块的留空高度的初始值为该排版块的留空高度的最小值，即blockList[i].margin＝blocklist[i].space[0]，blockList[i].margin为第i个排版块的留空高度的初始值，blocklist[i].space[0]为第i个排版块的留空高度的最小值。blockList[i].margin属性可以通过赋给该排版块的css样式中的marginBottom来实现排版块的留空高度，只要改变blockList[i].margin就可以调整排版块的留空高度。

3.2当

且

时，前k-1个排版块在第一个页面块排版后剩余空白的高度

其中，minH[i]为第i个排版块所占据的高度的最小值，minH[i]＝blockList[i].height+blockList[i].margin，pageHeight[1]为第一个页面块的高度。

3.3将剩余空白平均分配给该k-1个排版块中优先级最高的t个排版块，t∈k-1，j∈t，则第j个排版块的留空高度blockList[j].margin＝blocklist[j].space[0]+lastSpace[1]/t。例如，lastSpace＝120，t＝6，那么每个排版块额外获得20空隙，那么对应的blockList[i].margin就要设置为blocklist[i].space[0]+20。

由于排版块的留空高度blockList[j].margin不能超过排版块的留空高度的最大值blockList[j].space[1]，则当第j个排版块的留空高度blockList[j].margin＞blocklist[j].space[1]时，设该排版块的留空高度blockList[j].margin＝blocklist[j].space[1]，则在第一次分配后剩余空白的高度lastSpace[1]＝lastSpace[1]-(blocklist[j].space[1]-blocklist[j].space[0])×t，再继续在该k-1个排版块中寻找优先级次之的排版块，将剩余空白平均分配优先级次之的排版块，依次类推，继续进行剩余空白的分配。

当k-1个排版块均已分配，且还有剩余空白没有被分配完时，则再次选择优先级最高的排版块，强行将剩余空白分配给优先级最高的排版块，此时，不设置排版块的留空高度的上限值。

3.4根据步骤3.3设置第一个页面块中k-1个排版块的留空高度，完成第一个页面块的排版。

如果第k-1个排版块的cont属性为true，则代表该排版块要求与第k个排版块同一页面块，那么第一页面块就只能放置k-2个排版块，第k-1个排版块放置到第二个页面块中。每个排版块的起始位置start等于前面所有排版块的高度加上该排版块对应的留空高度。

3.5重复步骤3.1至3.4，从第k个排版块开始进行第二个页面块的排版，依次类推，直到完成所有排版块在页面块的排版，即完成多个排版块在对应页面块对应位置上的放置。

4、对页面块上的排版块进行拖拽实现自由排版，每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的网页内容，如图1所示。

如果排版块的dargabel属性为true，则表示该排版块可以拖拽，对于可拖拽的排版块，将绑定光标点击与移动事件，拖拽的具体操作为：

4.1设待拖拽的排版块为第i个排版块，点击该排版块(还未释放)，获得点击处的坐标为x₁,y₁；

4.2移动光标至目标位置，获得目标位置的坐标为x₂,y₂，则目标位置与点击处的高度差为Δh1＝y₂-y₁；

4.3该排版块的上一个排版块的留空高度不一定在space的范围内，但是不能为负数，如果向上拖拽导致Δh1为负数且使blockList[i-1].margin+Δh1也为负数，则需要对该拖拽操作进行修正，将blockList[i-1].margin设置为0，而不是负数，因此，判断blockList[i-1].margin+Δh1是否小于0，如果是，则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝0，否则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝blockList[i-1].margin+Δh1，即实现了该排版块的拖拽操作。每次拖拽操作都将导致上一个排版块后的所有排版块的位置发生变化，计算出每个排版块的起始位置start和结束位置end，即可获得排版块所占据的高度H[i]＝blockList[i].end-blockList[i].start。

5、由于不能页面块是不同的div元素，两者之间存在页眉页脚之类的元素，导致浏览器页面无法将一个排版块同时渲染在两个不同的页面块中。为此，对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示。

采用js算法判断排版块是否为跨页面块，具体操作为：

5.11获取待判断排版块的起始位置、结束位置，以及该排版块所在的页面块的高度pageHeight。

5.12判断

与

是否相等，如果相等，则该排版块在同一页面块中，否则，该排版块为跨页面块的排版块；

其中，blocklist[i].start、blocklist[i].end分别为该排版块的起始位置和结束位置，

为向上取整。

例如，

则该排版块处于第3个页面块的末尾、第四个页面块的开头处，为跨页面块的排版块。

采用部分显示部分隐藏的方式实现排版块分页显示的具体操作为：

5.21将每个页面块的css样式中设置overflow:hidden，即每个页面块中超出该页面块的部分被遮挡，当跨页面块的排版块处于当前页面块的末尾处时，超出当前页面块的部分被遮挡。例如，第3个页面块的最后一个排版块为跨页面块的排版块，那么该排版块超出当前页面块的部分被遮挡，只显示了一部分。

5.22将该排版块复制，并放置在当前页面块的下一个页面块的开头处。放在下一个页面块的开头处时，该排版块的全部内容均显示。

5.23计算该排版块在当前页面块中显示的高度Δh2，Δh2＝pageHeight-blocklist[i].start，其中，pageHeight为当前页面块的高度，blocklist[i].start为该排版块的起始位置。

5.24在下一个页面块中，将包括该排版块的所有排版块均向上移动Δh2，即实现该排版块的分页显示，且使该排版块的两部分能够衔接起来，看上去像是一个排版块，如图2所示，图2中，题5为分页显示。

在实际应用中，还强制要求，每个页面块的第一个排版块如果不是跨页面块的排版块，则start必须为pageHeight整数倍，也就说该排版块在该页面块的上方不能有空白。

相应的，一种对网页内容进行分页排版的系统，其特征在于，包括：

排版划分模块，用于将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为多个排版块，设置每个排版块的属性参数；

页面块设置模块，用于根据排版划分模块中H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块；

排版块放置模块，用于根据排版划分模块中每个排版块的属性参数，将多个排版块分别放置在页面块设置模块中设置的对应页面块的对应位置上；

分页排版显示模块，用于对页面块上的排版块进行拖拽实现自由排版，并显示每个页面块自由排版后的内容；

跨页显示模块，用于对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示。

以上所揭露的仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或变型，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种对网页内容进行分页排版的方法，其特征在于，包括以下步骤：

步骤1：将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为多个排版块，设置每个排版块的属性参数；

步骤2：根据H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块；

步骤3：根据每个排版块的属性参数，将多个排版块分别放置在对应页面块的对应位置上；

步骤4：对页面块上的排版块进行拖拽实现自由排版，每个页面块包含的排版块以及排版块之间的相对位置即为分页排版后所显示的网页内容。

2.如权利要求1所述的一种对网页内容进行分页排版的方法，其特征在于：所述步骤1中，排版块的属性参数包括排版块所占据的高度、排版块的留空高度、优先级、是否强制该排版块与下一个排版块同一页面块、是否强制该排版块重起一个页面块、以及是否可拖拽。

3.如权利要求1所述的一种对网页内容进行分页排版的方法，其特征在于，所述步骤3的具体操作为：

步骤3.1：设第i个排版块的留空高度的初始值为该排版块的留空高度的最小值，即blockList[i].margin＝blocklist[i].space[0]，blockList[i].margin为第i个排版块的留空高度的初始值，blocklist[i].space[0]为第i个排版块的留空高度的最小值；

步骤3.2：当

且

时，前k-1个排版块在第一个页面块排版后剩余空白的高度

其中，minH[i]为第i个排版块所占据的高度的最小值，pageHeight[1]为第一个页面块的高度；

步骤3.3：将剩余空白平均分配给该k-1个排版块中优先级最高的t个排版块，t∈k-1，j∈t，则第j个排版块的留空高度blockList[j].margin＝blocklist[j].space[0]+lastSpace[1]/t；

步骤3.4：根据步骤3.3设置第一个页面块中k-1个排版块的留空高度，完成第一个页面块的排版；

步骤3.5：重复步骤3.1至3.4，从第k个排版块开始进行第二个页面块的排版，依次类推，直到完成所有排版块在页面块的排版，即完成多个排版块在对应页面块对应位置上的放置。

4.如权利要求3所述的一种对网页内容进行分页排版的方法，其特征在于：所述步骤3.3中，当第j个排版块的留空高度blockList[j].margin＞blocklist[j].space[1]时，设该排版块的留空高度blockList[j].margin＝blocklist[j].space[1]，则剩余空白的高度lastSpace[1]＝lastSpace[1]-(blocklist[j].space[1]-blocklist[j].space[0])×t，再继续在该k-1个排版块中寻找优先级次之的排版块，将剩余空白平均分配优先级次之的排版块，依次类推，继续进行剩余空白的分配；

其中，blocklist[j].space[1]为第j个排版块的留空高度的最大值。

5.如权利要求4所述的一种对网页内容进行分页排版的方法，其特征在于：当k-1个排版块均已分配，且还有剩余空白没有被分配完时，则再次选择优先级最高的排版块，强行将剩余空白分配给优先级最高的排版块。

6.如权利要求1所述的一种对网页内容进行分页排版的方法，其特征在于：所述步骤4中，拖拽的具体操作为：

步骤4.1：点击待拖拽的排版块，获得点击处的坐标为x₁,y₁；

步骤4.2：移动光标至目标位置，获得目标位置的坐标为x₂,y₂，则目标位置与点击处的高度差为Δh1＝y₂-y₁；

步骤4.3：判断blockList[i-1].margin+Δh1是否小于0，如果是，则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝0，否则设该排版块的上一个排版块的留空高度blockList[i-1].margin＝blockList[i-1].margin+Δh1，

其中，blockList[i-1]为该排版块的上一个排版块。

7.如权利要求1所述的一种对网页内容进行分页排版的方法，其特征在于：所述方法还包括步骤5：对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示。

8.如权利要求7所述的一种对网页内容进行分页排版的方法，其特征在于：采用js算法判断排版块是否为跨页面块，具体操作为：

步骤5.11：获取待判断排版块的起始位置、结束位置，以及该排版块所在的页面块的高度pageHeight；

步骤5.12：判断

与

是否相等，如果相等，则该排版块在同一页面块中，否则，该排版块为跨页面块的排版块；

其中，blocklist[i].start、blocklist[i].end分别为该排版块的起始位置和结束位置，

为向上取整。

9.如权利要求7所述的一种对网页内容进行分页排版的方法，其特征在于：采用部分显示部分隐藏的方式实现排版块分页显示的具体操作为：

步骤5.21：将每个页面块的css样式中设置overflow:hidden，即每个页面块中超出该页面块的部分被遮挡，当跨页面块的排版块处于当前页面块的末尾处时，超出当前页面块的部分被遮挡；

步骤5.22：将该排版块复制，并放置在当前页面块的下一个页面块的开头处；

步骤5.23：计算该排版块在当前页面块中显示高度

Δh2＝pageHeight-blocklist[i].start，其中，pageHeight为当前页面块的高度，blocklist[i].start为该排版块的起始位置；

步骤5.24：在下一个页面块中，将包括该排版块的所有排版块均向上移动Δh2，即实现该排版块的分页显示。

10.一种对网页内容进行分页排版的系统，其特征在于，包括：

排版划分模块，用于将需要排版的内容渲染在H5页面上，且以标题或题目为单位将需要排版的内容划分为多个排版块，设置每个排版块的属性参数；

页面块设置模块，用于根据排版划分模块中H5页面的高度和宽度，在页面上设置多个大小比例适应的div块，即页面块；

排版块放置模块，用于根据排版划分模块中每个排版块的属性参数，将多个排版块分别放置在页面块设置模块中设置的对应页面块的对应位置上；

分页排版显示模块，用于对页面块上的排版块进行拖拽实现自由排版，并显示每个页面块自由排版后的内容；

跨页显示模块，用于对于跨页面块的排版块，采用部分显示部分隐藏的方式实现该排版块的分页显示。

Images