整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

如何给wordpress网站的文章列表，添加分页效果？可以通过2种方式

上一章节中，我们为wordpress网站的首页添加了全站文章列表。一个wordpress网站不可能只有几篇文章，可能会有成千上万的文章，作为一个wordpress博客主题模板，一般情况下，不可能让所有的文章在一个页面一下子全部显示出来，如果真这样，网页的负载会非常大。正确的处理方式，是先显示最前面的十几篇或二十几篇文章，然后，“点击一个分页按钮”或者“鼠标向下滚动触发一个事件”后，再显示后面的十几篇或二十几篇文章，以此类推。本节，我们来介绍“如何给wordpress网站的文章列表添加分页效果”，一起来看看吧。

方法一：给wordpress网站模板添加自定义分页函数。

在wordpress网站模板的functions.php文件中添加如下代码：


//分页函数function pages($query_string){

global $posts_per_page, $paged; //全局变量

$my_query = new WP_Query($query_string ."&posts_per_page=-1"); //创建查询对象

$total_posts = $my_query->post_count; //通过查询对象获取文章总数

if(empty($paged)) $paged = 1; //当前页码数，如是$paged为空，就让

$paged=1$prev = $paged - 1; //上一页变量

$next = $paged + 1; //下一页变量

$range = 4; //

$showitems = ($range * 2)+1; //显示多少个分页页码按钮

$pages = ceil($total_posts/$posts_per_page); //获取总页数

if(1 != $pages){

echo "<div class='pagination'>";

echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";

echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";

for ($i=1; $i <= $pages; $i++){

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){

echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";

}

}

echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";

echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";echo "</div>\n";

}

}

然后，在wordpress网站前台模板的文章列表的代码下方调用这个分页函数，代码如下：


<?php pages($query_string); //列表分页 ?>

然后，我们就可以在wordpress网站的文章列表下方看到分页按钮。如果想要样式好看一点，可以对分页按钮添加CSS样式，来进行美化一下。

方法二：使用wordpress自带的分页函数。

为了更方便wordpress网站模板开发者开发模板主题，wordpress从4.0版本开始，就提供了一个分页函数the_posts_pagination()，通过这个函数，我们同样可能实现wordpress网站的文章列表的分页效果。代码如下：


the_posts_pagination( array('mid_size' => 3, //当前页码数的 两边 显示几个页码。'prev_text' =>'<', //上一页'next_text' =>'>', //下一南) );

这个函数跟wordpress其wp_list_pages()等函数类似，有一个参数，这个参数可是一个数组类型（如上面的代码，参数就是数组类型），也可以是一个字符串类型，上面的的代码的参数修改成字符串类型后，如下：


the_posts_pagination("mid_size=3&prev_text=<&next_text=>");

是使用字符串类型，还是使用数组类型，主要根据开发者的个人爱好，我个人还是比较喜欢用数组类型，看起来比较清楚。

在wordpress网站模板开发中，使用上面任何一种方式来添加文章列表的分页效果都可以，不过，我个人还是建议使用wordpress自带的函数the_posts_pagination()，对开发更省事，效率更高，而且是wordpress自己的函数，后期都不需要维护。如果想让分页按钮布局更加个性化，可以考第一种方式。

如果还有什么不太明白的，或者你想了解什么，可以在下面评论中给我留言。

述

昨天介绍了Oracle分页实现方案，那么，mysql又是如何实现分页呢？

参考官网：https://dev.mysql.com/doc/refman/5.7/en/select.html

mysql分页实现

MySQL中实现分页查询：在数据量较小的情况下可使用limit查询来实现分页查询，在数据量大的情况下使用建立主键或唯一索引来实现，另外可通过order by对其排序。

The LIMIT clause can be used to constrain the number of rows returned by the SELECT statement. LIMIT takes one or two numeric arguments, which must both be nonnegative integer constants, with these exceptions:

  • Within prepared statements, LIMIT parameters can be specified using ? placeholder markers.
  • Within stored programs, LIMIT parameters can be specified using integer-valued routine parameters or local variables.

1、limit分页实现

先看一下limit语法

SELECT * FROM TABLE
    [ORDER BY {col_name | expr | position}
      [ASC | DESC], ... [WITH ROLLUP]]
    [LIMIT {[offset,] row_count | row_count OFFSET offset}]

LIMIT子句可以被用于强制 SELECT 语句返回指定的记录数。LIMIT接受一个或两个数字参数。参数必须是一个整数常量。
如果给定两个参数，第一个参数指定第一个返回记录行的偏移量，第二个参数指定返回记录行的最大数目。初始记录行的偏移量是 0(而不是 1)。

1.1、传统实现方式

一般情况下，客户端通过传递 pageNo（页码）、pageSize（每页条数）两个参数去分页查询数据库中的数据，在数据量较小（元组百/千级）时使用 MySQL自带的 limit 来解决这个问题

--pageNo：页码
--pagesize:每页显示的条数
select * from table limit (pageNo-1)*pageSize,pageSize;

1.2、建立主键或者唯一索引(高效)

在数据量较小的时候简单的使用 limit 进行数据分页在性能上面不会有明显的缓慢，但是数据量达到了 万级到百万级 sql语句的性能将会影响数据的返回。这时需要利用主键或者唯一索引进行数据分页；

--pageNo：页码
--pagesize:每页显示的条数
--假设主键或者唯一索引为 t_id
select * from table where t_id > (pageNo-1)*pageSize limit pageSize;

1.3、基于数据再排序

当需要返回的信息为顺序或者倒序时，对上面的语句基于数据再排序。order by ASC/DESC 顺序或倒序 默认为顺序

 select * from table where t_id > (pageNo-1)*pageSize order by t_id limit pageSize;


2、查询显示行号（实现类似Oracle数据库的ROWNUM()）

Oracle中有专门的rownum()显示行号的函数，而MySQL没有专门的显示行号函数，但可以通过用@rownum自定义变量显示行号。

一般实现过程如下：

SELECT 
  (@rownum := @rownum + 1) AS rownum,
  t.* 
FROM
  table t,
  (SELECT @rownum := 0) AS rn


3、实例演示

3.1、环境准备

CREATE TABLE t (
	EMPNO BIGINT ( 4 ) NOT NULL,
	ENAME VARCHAR ( 10 ),
	JOB VARCHAR ( 9 ),
	MGR BIGINT ( 4 ),
	HIREDATE date,
	SAL BIGINT ( 10 ),
	COMM BIGINT ( 10 ),
	DEPTNO BIGINT ( 2 ),
	PRIMARY KEY ( `EMPNO` ) 
) ENGINE = INNODB;
INSERT INTO t VALUES ('7369', 'SMITH', 'CLERK', '7902', '1980-12-17', '800', NULL, '20');
INSERT INTO t VALUES ('7499', 'ALLEN', 'SALESMAN', '7698', '1981-02-20', '1600', '300', '30');
INSERT INTO t VALUES ('7521', 'WARD', 'SALESMAN', '7698', '1981-02-22', '1250', '500', '30');
INSERT INTO t VALUES ('7566', 'JONES', 'MANAGER', '7839', '1981-04-02', '2975', NULL, '20');
INSERT INTO t VALUES ('7654', 'MARTIN', 'SALESMAN', '7698', '1981-09-28', '1250', '1400', '30');
INSERT INTO t VALUES ('7698', 'BLAKE', 'MANAGER', '7839', '1981-05-01', '2850', NULL, '30');
INSERT INTO t VALUES ('7782', 'CLARK', 'MANAGER', '7839', '1981-06-09', '2450', NULL, '10');
INSERT INTO t VALUES ('7788', 'SCOTT', 'ANALYST', '7566', '1987-04-19', '3000', NULL, '20');
INSERT INTO t VALUES ('7839', 'KING', 'PRESIDENT', NULL, '1981-11-17', '5000', NULL, '10');
INSERT INTO t VALUES ('7844', 'TURNER', 'SALESMAN', '7698', '1981-09-08', '1500', '0', '30');
INSERT INTO t VALUES ('7876', 'ADAMS', 'CLERK', '7788', '1987-05-23', '1100', NULL, '20');
INSERT INTO t VALUES ('7900', 'JAMES', 'CLERK', '7698', '1981-12-03', '950', NULL, '30');
INSERT INTO t VALUES ('7902', 'FORD', 'ANALYST', '7566', '1981-12-03', '3000', NULL, '20');
INSERT INTO t VALUES ('7934', 'MILLER', 'CLERK', '7782', '1982-01-23', '1300', NULL, '10');
commit;

3.2、limit分页

--查询第一页，每页显示5条数据
select * from t order by empno desc limit (1-1)*5,5;

--查询第二页，每页显示4条数据
select * from t order by empno desc limit (2-1)*4,4;

3.3、查询显示行号

--查询第二页，每页显示4条数据,并在第一列加上行号
select (@rownum := @rownum + 1) AS rownum,t.* from t,
  (SELECT @rownum := 0) AS rn 
order by t.empno desc 
limit 4,4;


觉得有用的朋友多帮忙转发哦！后面会分享更多devops和DBA方面的内容，感兴趣的朋友可以关注下~

言

最近在业务上遇到了一个问题是要将页面打印输出成pdf文件，通过点击一个按钮，就能够将页面写在一个pdf上，并下载下来，需要保证pdf的内容具有很好的可读性。

经评估要实现这个需求，一种可行的方案是将HTML页面转为PDF，并实现下载。通过技术调研，最终的方案确定为通过html2canvas + jspdf这两个库来实现，通过使用html2canvas提供的方法，将页面元素转为base64图片流，然后将其插入jspdf插件中，实现保存并下载pdf。

html2canvas + jspdf方案是前端实现页面打印的一种常用方案，但是在实践过程中，遇到的最大问题就是分页截断的问题：当页面元素超过一页A4纸的时候，连续的页面就会因为分页而导致内容被截断，进而影响了pdf的可读性。

由于网上关于分页截断的解决思路比较少，所以特意将此次的解决方案记录下来。

使用 JSPDF 和 html2canvas 创建简单的 PDF文件

首先，我们开始使用 JSPDF 和 html2canvas 生成一个简单的 PDF文件。

创建一个 JSPDF 实例

创建一个 JSPDF 实例，设置页面的大小、方向和其他参数。参考官网可以写一个很简单的实例

var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
}

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

生成一个pdf文件，并且在文件中写入一定内容，其实JSPDF这个库就能做到。

但是很多业务场景下，我们的目标内容会更复杂，而且还要考虑样式，所以最好的方式是引入html2canvas这个库，将页面元素转换成base64数据，然后贴在pdf中(使用addImage方法），这样就能保证页面的内容。

引入了html2canvas库后，我们更多关注是利用现成组件库、框架或者原生html和css实现更复杂的页面内容。

引入 html2canvas

使用 html2canvas 捕捉 HTML 内容或特定的 HTML 元素，并将其转换为 Canvas。其中，html2canvas 函数的主要用法是：

html2canvas(element, options);
  • element： 要渲染为 canvas 的 HTML 元素。这可以是一个 DOM 元素，也可以是一个选择器字符串，表示需要渲染的元素。
  • options（可选）： 一个包含配置选项的对象，用于定制 html2canvas 的行为。

以下是一些常见的配置选项：

  • allowTaint（默认值: false）： 是否允许加载跨域的图片，默认为 **false**。如果设为 true，html2canvas 将尝试加载跨域的图片，但在某些情况下可能会受到浏览器的限制。
  • backgroundColor（默认值: #ffffff）： canvas 的背景颜色。
  • useCORS（默认值: false）： 是否使用 CORS（Cross-Origin Resource Sharing）来加载图片。如果设置为 **true**，则 html2canvas 将尝试使用 CORS 来加载图片。
  • logging（默认值: false）： 是否输出日志信息到控制台。
  • width 和 height： canvas 的宽度和高度。如果未指定，则默认为目标元素的宽度和高度。
  • scale（默认值: window.devicePixelRatio）： 缩放因子，决定 canvas 的分辨率。

下面是一个简单的demo，可以看到html2canvas能够将dom元素转化为一张base64图片，将鼠标选中元素，可以感受到图片和文字的不同。

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

Untitled.png

将html2canvas转化的图片放到pdf中

这一步我们需要使用JSPDF 的addImage方法，其语法如下：

addImage(imageData, format, x, y, width, height, alias, compression)
  • imageData - 要添加的图像数据。可以是图像的 URL、图像的 base64 编码字符串或图像的二进制数据
  • format - 图像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
  • x - 图像在 PDF 文档中的 x 坐标。
  • y - 图像在 PDF 文档中的 y 坐标。
  • width - 图像的宽度。
  • height - 图像的高度。
  • alias - 图像的别名。此别名可用于在 PDF 文档中引用图像。
  • compression - 图像的压缩级别。可以是 "NONE"、"FAST" 或 "SLOW"。

下面是一串示例代码：

import jsPDF from 'jspdf';

export default function addImageUsage() {
  const doc = new jsPDF();
  const imageData = 【替换成base64数据流】;
  doc.addImage(imageData, 'png', 0, 0, 10, 10);
  doc.addImage(imageData, 'png', 100, 100, 10, 10);
  doc.addImage(imageData, 'png', 200, 200, 10, 10);

  drawNet(doc);

  doc.save('output.pdf');
}

const drawNet = (doc) => {
  const gap = 10;
  const start = [0, 0];
  const end = [595.28, 841.89];

  // 所有横线
  for (let i = start[0]; i < end[0]; i = i + gap) {
    doc.line(i, 0, i, end[0]);
  }
  // 所有纵线
  for (let j = start[1]; j < end[1]; j = j + gap) {
    doc.line(0, j, end[1], j);
  }
};

此示例将在 PDF 文档（默认是A4纸大小，宽高为[595.28, 841.89]像素）的 (10, 10) 、(100, 100) 、(200, 200) 坐标处，添加一张png 图像。图像的宽度和高度将分别为 10 和 10 像素，为了了解pdf中的坐标系统，此示例还在pdf文档中生成了间距为10px的网格系统。

JSPDF 和 html2canvas结合起来用

了解了上面的三个关键点，接下来我们将这三个步骤串联起来，实现一个基本的html→pdf的方案。大致步骤如下：

  1. 写一个基本html页面
  2. 创建jspdf实例
  3. 获取页面的dom节点，使用html2canvas将其转化为base64数据流
  4. 将base64数据流装载到jspdf提供的addImage方法中
  5. 保存pdf

基于这5个步骤，可以实现基本的页面打印。

import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';

// 将元素转化为canvas元素
// 通过 放大 提高清晰度
// width为内容宽度
async function toCanvas(element: HTMLElement) {
  if (!element) return { width: 0, height: 0 };

  // canvas元素
  const canvas = await html2canvas(element, {
    scale: window.devicePixelRatio * 2, // 增加清晰度
    useCORS: true // 允许跨域
  });

  // 获取canvas转化后的宽高
  const { width: canvasWidth, height: canvasHeight } = canvas;

  // 转化成图片Data
  const canvasData = canvas.toDataURL('image/jpeg', 1.0);

  return { width: canvasWidth, height: canvasHeight, data: canvasData };
}

/**
 * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)
 */
export async function generatePDF({
  /** pdf内容的dom元素 */
  element,

  /** pdf文件名 */
  filename
}) {
  if (!(element instanceof HTMLElement)) {
    return;
  }

  const pdf = new jsPDF();

  // 一页的高度， 转换宽度为一页元素的宽度
  const {
    width: imageWidth,
    height: imageHeight,
    data
  } = await toCanvas(element);

  // 添加图片
  function addImage(
    _x: number,
    _y: number,
    pdfInstance: jsPDF,
    base_data:
      | string
      | HTMLImageElement
      | HTMLCanvasElement
      | Uint8Array
      | RGBAData,
    _width: number,
    _height: number
  ) {
    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);
  }

  addImage(0, 0, pdf, data!, imageWidth, imageHeight);

  return pdf.save(filename);
}

多页：比例缩放+循环移位

通常，在我们的实践中，会发现2个问题：

  • 生成的pdf内容与实际的页面元素比例不一致
  • 页面内容超出一页pdf的高度，但是生成的pdf只有一页，没有展示全部的页面信息

这两个问题的解决方案是等比例缩放+循环移位：

  • 等比例缩放

通过比例缩放，实现页面内容等比例展示在pdf文档中

令页面元素的宽高为x, y（转化成canvas图片的宽高），pdf文档的宽高为w, h。因为高度可以通过加页延伸，所以可以按照宽度进行缩放，缩放后的图片高度可以通过下列公式计算

  • 循环移位

如果页面的高度超出了pdf文档的高度，即y > h，使用addPage方法添加一页即可。但是在新的一页中，我们的图片内容的高度需要调整。

假设y = 2 * h，这意味我们需要两页才能完整得展示页面内容。在一页pdf中，图片在起始位置插入即可，即

 PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是缩放后的大小

在第二页pdf中，图片的纵向位置需要调整一页pdf的高度，即

 PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是缩放后的大小

通过循环计算剩余高度，然后不停调整纵向位置移动base64的图片位置，可以解决多页的问题。

分页截断的挑战

尽管 JSPDF 和 html2canvas 是功能强大的工具，但是他们也有很多槽点，比如得手动分页，手动处理分页截断的问题。等你实践到这一步，就开始面临分页截断的问题，类似的问题也有网友在Github上提出，但是底下依然没有很好的解决思路。

好在掘金上有人分享了一个不错的方法：

jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例） - 掘金

概括一下，其处理分页截断的原理就是在使用addImage之前，将html进行分页，通过维护一个高度位置数据，来记录每次循环迭代addImage的位置。

从高到低遍历维护一个分页数组pages，该数组记录每一页的起始位置，如：pages[0] 对应 第一页起始位置，pages[1] 对应第二页起始位置

Untitled2.png

接下来我们重点讨论如何将页面进行切割，然后生成pages这个数组。

假设页面的高度是1500，pdf宽高是[500, 900]，如果不用处理分页截断的问题，我们可以想到第一页（0-900）是用来承载页面从高度为0到900的信息；

第二页（900-1800）是用来承载页面从高度900到1500的，所以pages数组为[0, 900]。

如果要处理分页截断呢，这时候就需要计算页面元素的距离pdf文档起始位置的高度h1，以及该元素的内部高度h2，通过这两个高度来判断这个元素要不要放在下一页，防止截断，示意图如下：

Untitled4.png

如果h1 + h2 > 页面高度， 这时候说明这个元素不处理的就会被分页截断，所以应该要把这个元素放到第二页去渲染，这就意味着pages记录的数据要变化，示意图如下，可以看到pages[1]我们往上调整了，比第二页pdf的起始位置更高。

Untitled5.png

说明渲染第二页pdf的时候，要从h1开始渲染，pages数组为[0, h1]，解释为第一页pdf渲染页面高度区域为0-900, 第二页pdf渲染html高度区域为h1-1500。注意到第一页渲染的时候到尾部的时候，会有部分内容和第二页头部内容重合。因为h1到900这部分的内容肯定会渲染，这部分内容一直都是页面元素，我们改变pages[1]的值的原因只是创建一个副本，让页面看起来内容没有被截断。

为了解决这个问题（为了美观），我们用填充一块白色区域遮掉它！此处使用jspdf的rect和setFillColor方法，把重合的区域遮白处理。

pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');

如何获得h1和h2

上面我们谈到了h1和h2，其中h1是元素盒子的上边距到打印区域的高度（比例缩放后的高度），h2是元素盒子的内部高度。

计算h1: getBoundingClientRect方法

const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;

Untitled6.png

计算h2：offsetHeight方法

Untitled7.png

值得注意的是，因为打印区域的html元素不一定是从窗口顶部开始，所以为了计算实际的h1(元素到打印区域的顶部距离），可以采用这样的方法：

  • 用getBoundingClientRect方法计算元素到窗口顶部的距离
  • 循环打印之前将pages信息针对第一个元素进行一个高度校准。
// 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，
  // 所以要把它修正，让其值是以真实的打印元素顶部节点为准
  const newPages = pages.map((item) => item - pages[0]);

在线demo演示和源代码

上述即是在实现前端页面生成pdf的过程中遇到的问题，以及解决思路。

为了更直观得感受效果，本文也给出了不同场景（单页、多页、多页截断、自定义页眉页脚、横向）下的pdf生成效果，可以通过此链接体验：https://pdf-demo-phi.vercel.app/

此demo的源代码如下：pdf-demo

与现有文章不同的是，本仓库的代码特点在于：

  • 支持设置pdf打印的方向，比如横向
  • 修正了高度计算问题，解决了多出一个空白页问题。掘金那篇文章计算元素高度时候没有减去容器距离顶部高度，所以导致很多新手使用那份代码的时候，会发现自己的页面顶部被裁剪到了，原因就是这个
  • 支持自定义页眉页脚
  • 支持扩展自定义分页方法，如果遇到复杂的组件，可以自定扩展逻辑计算高度

作者:燕平

来源:微信公众号:Goodme前端团队

出处:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA


在线咨询
上一篇：HTML radio页面控件获取checked值
下一篇：HTML如何设置div背景图片的的透明度

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 玉溪 太谷县 天桥区 清丰县 商河县 安源区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服