整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
上一章節中，我們為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從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自己的函數，后期都不需要維護。如果想讓分頁按鈕布局更加個性化，可以考第一種方式。
如果還有什么不太明白的，或者你想了解什么，可以在下面評論中給我留言。
最近在業務上遇到了一個問題是要將頁面打印輸出成pdf文件，通過點擊一個按鈕，就能夠將頁面寫在一個pdf上，并下載下來，需要保證pdf的內容具有很好的可讀性。
經評估要實現這個需求，一種可行的方案是將HTML頁面轉為PDF，并實現下載。通過技術調研，最終的方案確定為通過html2canvas + jspdf這兩個庫來實現，通過使用html2canvas提供的方法，將頁面元素轉為base64圖片流，然后將其插入jspdf插件中，實現保存并下載pdf。
html2canvas + jspdf方案是前端實現頁面打印的一種常用方案，但是在實踐過程中，遇到的最大問題就是分頁截斷的問題：當頁面元素超過一頁A4紙的時候，連續的頁面就會因為分頁而導致內容被截斷，進而影響了pdf的可讀性。
由于網上關于分頁截斷的解決思路比較少，所以特意將此次的解決方案記錄下來。
首先，我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。
創建一個 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 捕捉 HTML 內容或特定的 HTML 元素，并將其轉換為 Canvas。其中，html2canvas 函數的主要用法是：
html2canvas(element, options);
以下是一些常見的配置選項：
下面是一個簡單的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
這一步我們需要使用JSPDF 的addImage方法，其語法如下：
addImage(imageData, format, x, y, width, height, alias, compression)
下面是一串示例代碼：
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的網格系統。
了解了上面的三個關鍵點，接下來我們將這三個步驟串聯起來，實現一個基本的html→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文檔中
令頁面元素的寬高為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: getBoundingClientRect方法
const rect=contentElement.getBoundingClientRect() || {};
const topDistance=rect.top;
return topDistance;
Untitled6.png
計算h2：offsetHeight方法
Untitled7.png
值得注意的是，因為打印區域的html元素不一定是從窗口頂部開始，所以為了計算實際的h1(元素到打印區域的頂部距離），可以采用這樣的方法：
// 對pages進行一個值的修正，因為pages生成是根據根元素來的，根元素并不是我們實際要打印的元素，而是element，
// 所以要把它修正，讓其值是以真實的打印元素頂部節點為準
const newPages=pages.map((item)=> item - pages[0]);
上述即是在實現前端頁面生成pdf的過程中遇到的問題，以及解決思路。
為了更直觀得感受效果，本文也給出了不同場景（單頁、多頁、多頁截斷、自定義頁眉頁腳、橫向）下的pdf生成效果，可以通過此鏈接體驗：https://pdf-demo-phi.vercel.app/
此demo的源代碼如下：pdf-demo
與現有文章不同的是，本倉庫的代碼特點在于：
作者:燕平
來源:微信公眾號:Goodme前端團隊
出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA
前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能代碼量比較大，所以今天寫一個關于用bootstrap框架分頁的例子，希望以后可以幫助到一些對這方面比較頭疼的碼農。
首先需要明確的一點是，哪些數據是需要分頁的，單從數據顯示上其實是沒有必要分頁的，因為頁面是可以顯示的出來的，但是作為一個相對比較合格的前端，你首先要考慮的不僅僅是這個功能是不是可以實現，而是要考慮用戶體驗是不是好的，在既有功能上如果可以更多的考慮用戶體驗的問題，那么才可以算是一個相對比較合格的前端工程師。
先看渲染圖：
這個是一個項目中的例子，今天就做以這個為例子，做一下
首先我們將需要用的數據準備好（這個一般是ajax請求到的數據，現在我們直接放到一個js里面，加載js的時候直接取出數據）
var testboke={
"code":200,
"message":null,
"data":{
"total":17,//總條數
"size":10,//分頁大小-默認為0
"pages":2,//總頁數
"current":1,//當前頁數
"records":[//author-riverLethe-double-slash-note數據部分
{
"id":17,//項目id
"userName":"Night夜",//發起人名稱
"companyName":"康佰裕",//發起人公司名稱
"ptypeName":"13",//發起項目類別
"pask":"13",
"pname":"13",
"pdesc":"13"
},
{
"id":16,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"12",
"pask":"12",
"pname":"12",
"pdesc":"12"
},
{
"id":15,
"userName":"BB機",
"companyName":"北京電影",
"ptypeName":"11",
"pask":"11",
"pname":"11",
"pdesc":"11"
},
{
"id":14,
"userName":"BB機",
"companyName":"北京電影",
"ptypeName":"9",
"pask":"9",
"pname":"9",
"pdesc":"9"
},
{
"id":13,
"userName":"BB機",
"companyName":"北京電影",
"ptypeName":"7",
"pask":"7",
"pname":"7",
"pdesc":"7"
},
{
"id":12,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"6",
"pask":"6",
"pname":"6",
"pdesc":"6"
},
{
"id":11,
"userName":"BB機",
"companyName":"北京電影",
"ptypeName":"5",
"pask":"5",
"pname":"5",
"pdesc":"5"
},
{
"id":10,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"4",
"pask":"4",
"pname":"4",
"pdesc":"4"
},
{
"id":9,
"userName":"BB機",
"companyName":"北京電影",
"ptypeName":"3",
"pask":"3",
"pname":"3",
"pdesc":"3"
},
{
"id":8,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"2",
"pask":"2",
"pname":"2",
"pdesc":"2"
}
]
}
}
接下來畫頁面的表格：
<body> <div class="templatemo-content col-1 light-gray-bg"> <div class="templatemo-top-nav-container"> <div class="row"> <nav class="templatemo-top-nav col-lg-12 col-md-12"> <li> <a href="">發起項目列表管理</a> </li> </nav> </div> </div> <!--正文部分--> <div style="background: #E8E8E8;height: 60rem;"> <div class="templatemo-content-container"> <div class="templatemo-content-widget no-padding"> <!--表頭--> <div class="panel-heading templatemo-position-relative"> <h2 class="text-uppercase">發起項目列表</h2></div> <div class="panel panel-default table-responsive" id="mainContent"> </div> </div> </div> </div> <div class="pagination-wrap" id="callBackPager"> </div> <footer class="text-right"> <p>Copyright ? 2018 Company Name | Designed by <a target="_parent">csdn</a> </p> </footer> </body>
這個時候也頁面上是沒有任何的元素的，因為我們需要的是將頁面上的表格用js動態的畫出來，這樣才可以實現取出來的數據是可以分頁的，但是畫表格的前提是你要可以拿到數據對不對，所以接下來應該是拿數據，而不是急著畫表格，因為沒有數據的時候你的表格即使是畫出來了，也是顯示不出來的，那么我們開始拿數據：
我們寫一個函數取數據：
/*將數據取出來*/
function data(curr, limit) {
//console.log("tot:"+totalCount)
/*拿到總數據*/
totalCount=testboke.data.total; //取出來的是數據總量
dataLIst=testboke.data.records; // 將數據放到一個數組里面（dataLIst 還未聲明，莫著急）
createTable(curr, limit, totalCount);
console.log("tot:"+totalCount)
}
拿到數據以后怎么做，分頁，是的，不是急著將數據放到表格里面，先分頁，ok我們加載分頁的js（bootstrap的分頁js）
<link href="../../css/font-awesome.min.css" rel="stylesheet" /> <link href="../../css/bootstrap.min.css" rel="stylesheet" /> <link href="../../css/templatemo-style.css" rel="stylesheet" /> <link href="../../css/layui/css/layui.css" rel="stylesheet" /> <script src="../../js/bootstrap.min.js" type="text/javascript"></script> <script src="../../js/jquery-1.8.3-min.js" type="text/javascript"></script> <script src="../../js/jquery.min.js" type="text/javascript"></script> <script src="../../js/extendPagination.js" type="text/javascript"></script> <script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript"></script> <!--引如測試數據的js--> <script src="../../js/testcode.js" type="text/javascript"></script>
上面的這些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我們加載數據的js。
下面就是將分頁的代碼寫上：
var currPage=1;
var totalCount;
var dataLIst=[];
window.onload=function() {
/*取到總條數*/
/*每頁顯示多少條 10條*/
var limit=10;
data(currPage, limit)
//console.log(totalCount)
createTable(1, limit, totalCount);
$('#callBackPager').extendPagination({
totalCount: totalCount,
limit: limit,
callback: function(curr, limit, totalCount) {
data(curr, limit)
}
});
}
加載以后的效果是這樣的：
這個時候就是已經基本將數據處理好了，只是沒有將數據放進去，最后我們將數據放進去就可以了，（我的寫法不建議借鑒，很多現成的循環畫表格的方法，我是原生的拼接字符串寫的，不嫌麻煩的可以自己拼一下，畢竟不管是什么框架，最底層的還是這樣的實現原理）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
