整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近在業務上遇到了一個問題是要將頁面打印輸出成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
示：本篇文章內容建議使用電腦瀏覽器查閱。
今天把之前關于Flask_Blog項目中關于帖子的主頁展示進行分頁，并實現點擊用戶名稱，顯示該用戶所發的帖子信息和數量。接下來開始：
修改Flask_Blog\flaskblog\routes.py，修改home方法使用分頁查詢方式，每頁顯示兩條數據：
添加根據用戶姓名查出所發帖子列表方法：
修改Flask_Blog\flaskblog\templates\home.html，添加點擊用戶名跳轉到用戶所發帖子連接，添加分頁html代碼：
在Flask_Blog\flaskblog\templates新建一個文件user_posts.html:
然后我們在文件夾Flask_Blog打開命令行cmd，運行python run.py，訪問http://127.0.0.1:5000/:
一共加了8條數據，所以分了4頁，鼠標點擊第2頁，顯示第二頁內容：
點擊帖子的用戶名test，查看test用戶的發帖信息：
今天關于帖子的分頁功能實現就到這里！
關注公號yale記
下面的是我的公眾號二維碼圖片，歡迎關注。
開發過程中，經常做的一件事，也是最基本的事，就是從數據庫中查詢數據，然后在客戶端顯示出來。當數據少時，可以在一個頁面內顯示完成。然而，如果查詢記錄是幾百條、上千條呢？直接一個頁面顯示完全的話，表格得多長啊。。。。。。這時，我們可以用分頁技術。
何為分頁？效果圖如下：
這里總共查詢了100條記錄，如果一次性顯示的話表格會很多行，用戶體驗不佳。而我們采用分頁顯示的話，一頁顯示10條記錄，共十頁。用戶可以自行翻閱，記錄少，清晰顯示。
下面談談分頁效果的實現，思路有三種：
其一：純JS實現分頁。一次性查詢記錄并加載到html的table中。然后通過選擇性地顯示某些行來達到分頁顯示的目的。這是一種偽分頁，障眼法而已。只能用于數據少的情況下。一旦數據多了，十幾萬條數據加載到html中會變得很慢。而且不實時，一次加載完后數據就寫死在頁面了，若數據庫中有變化，瀏覽器端顯示的仍是上次加載過來的數據。
首先：用table來顯示查詢出來的記錄們，全部顯示。
<table width="500" id="idData">
<%
String user_id, user_name, user_sex, user_phone, user_age;
while (sqlRst.next()) {
user_id = sqlRst.getString(1);
user_name = sqlRst.getString(2);
user_sex = sqlRst.getString(3);
user_phone = sqlRst.getString(4);
user_age = sqlRst.getString(5);
%>
<tr>
<td><%=user_id%></td>
<td><%=user_name%></td>
<td><%=user_sex%></td>
<td><%=user_phone%></td>
<td><%=user_age%></td>
</tr>
<%
}
%>
</table>
<br/>
<table width="60%" align="right">
<tr><td><div id="changePages" name="changePages"></div></td></tr>
</table>
然后，在JS中修改table中某些行顯示，某些行隱藏。
<script type="text/javascript">
function goPage(pno,psize){
var itable = document.getElementById("idData");//獲取table
var num = itable.rows.length;//得到記錄總數
var totalPage = 0;
var pageSize = psize;//一頁顯示pageSize條記錄
//計算總頁數
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
//當前頁數
var currentPage = pno;
//獲取當前頁第一條、最后一條記錄的行號
var startRow = (currentPage - 1) * pageSize+1;
var endRow = currentPage * pageSize;
endRow = (endRow > num)? num : endRow;
//修改table中當前頁對應的行的屬性為顯示，非本頁的記錄為隱藏
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
//分頁頁碼列表
var tempStr = "共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>"
}else{
tempStr += "首頁";
tempStr += "<上一頁";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>";
}else{
tempStr += "下一頁>";
tempStr += "尾頁";
}
document.getElementById("changePages").innerHTML = tempStr;
}
</script>
其二：一次查詢，分批顯示。
就是說，我們可以執行一個數據庫查詢操作，得到結果集rs。然后，通過指針的移動來顯示當前頁面的記錄。這樣，就可以以 rs.absolute(當前頁面號*每頁記錄數)定位到當前頁的第一條記錄，然后通過while循環顯示n條記錄（n為每頁顯示記錄數）。在跳頁時，只需修改currentPage，即可在重定位到下一頁時把當前頁面號改掉，重新定位記錄指針，通過while遍歷顯示n條記錄。與JS選擇性顯示不同，這里是選擇性遍歷。與JS分頁不同的是，這里分頁每次跳頁修改的是遍歷的指針，每次跳頁都要進行一次全面查詢。同樣地，不適合大數據量查詢。這里比JS分頁優化的地方在于——實時性。每次跳頁都會查詢一次數據庫，保證數據的實時性。
參考代碼：
<%
int intPageSize = 10; //一頁顯示的記錄數 int intRowCount; //記錄總數
int intPageCount; //總頁數
String strPage; //從表單或URL傳送的待顯示頁碼
int intPage; //待顯示頁碼 ，由strPage轉換成的整數
//---計算記錄總數的第一種方法：查詢出所有記錄，移動結果集指針到最后一條，獲取最后一條記錄的行號
//查詢所有數據 ResultSet sqlRst = sqlStmt.executeQuery("select * from user");
//獲取記錄總數
sqlRst.last(); //光標在最后一行
intRowCount = sqlRst.getRow(); //獲得當前行號，即總記錄數
//記算總頁數
intPageCount = (int)Math.ceil(intRowCount/(intPageSize*1.0));
//將記錄指針定位到待顯示頁的第一條記錄上
sqlRst.absolute((intPage - 1) * intPageSize + 1);
//顯示數據
int i=0;
String user_id, user_name, user_sex, user_phone, user_age;
while (i < intPageSize && !sqlRst.isAfterLast()) {
user_id = sqlRst.getString(1);
user_name = sqlRst.getString(2);
user_sex = sqlRst.getString(3);
user_phone = sqlRst.getString(4);
user_age = sqlRst.getString(5);
%>
<tr>
<td><%=user_id%></td>
<td><%=user_name%></td>
<td><%=user_sex%></td>
<td><%=user_phone%></td>
<td><%=user_age%></td>
</tr>
<%
sqlRst.next();//移動記錄指針指向下一條記錄
i++;//統計當前頁已顯示多少條記錄
}
%>
其三：在服務端分頁。跳到第n頁才查詢、顯示第n頁內容。要點就是根據客戶端表格的“頁面”計算出數據庫要查詢的當前頁面的第一條記錄的位置。優點：實時性：跳頁才查詢。數據量小：只加載當前頁的記錄進行顯示。
重點在于兩條語句：select count(*) from ...:查詢得到記錄總條數
select * from .. limit pageNo,rowsCount:查詢從第pageNo條開始的rowsCount條數據。
int pages=0; //待顯示頁面
int count=0; //總條數
int totalpages=0; //總頁數
int limit=10; //每頁顯示記錄條數
//計算記錄總數的第二種辦法：使用mysql的聚集函數count(*)
ResultSet sqlRst = sqlStmt.executeQuery("select count(*) from user");
if(sqlRst.next()){
count = sqlRst.getInt(1);//結果為count(*)表，只有一列。這里通過列的下標索引（1）來獲取值
}
//由記錄總數除以每頁記錄數得出總頁數
totalpages = (int)Math.ceil(count/(limit*1.0));
//獲取跳頁時傳進來的當前頁面參數
String strPage = request.getParameter("pages");
//判斷當前頁面參數的合法性并處理非法頁號（為空則顯示第一頁，小于0則顯示第一頁，大于總頁數則顯示最后一頁）
if (strPage == null) {
pages = 1;
} else {
try{
pages = java.lang.Integer.parseInt(strPage);
}catch(Exception e){
pages = 1;
}
if (pages < 1){
pages = 1;
}
if (pages > totalpages){
pages = totalpages;
}
}
//由(pages-1)*limit算出當前頁面第一條記錄，由limit查詢limit條記錄。則得出當前頁面的記錄
sqlRst = sqlStmt.executeQuery("select * from user order by user_id limit " + (pages - 1) * limit + "," + limit);
while (sqlRst.next()){//遍歷顯示}
跳頁的實現：跳頁是通過重定向來實現的，通過向當前網頁傳進待顯示的pages，在跳轉后根據pages重新算出頁面顯示的第一條，查limit條顯示。
<form name="f1" method="POST" action="index.jsp" onSubmit="return checknum()">
<table border="0" align="center" >
<tr>
<td>第<%=pages%>頁 共<%=totalpages%>頁 <a href="index.jsp?pages=1">首頁</a></td>
<td><a href="index.jsp?pages=<%=(pages<1)?pages:(pages-1) %>"> 上一頁</a></td>
<td><a href="index.jsp?pages=<%=(pages>=totalpages)?totalpages:(pages+1)%>"> 下一頁</a></td>
<td><a href="index.jsp?pages=<%=totalpages%>">最后一頁</a></td>
<td>轉到第:<input type="text" name="page" size="8">頁<input type="submit" value="GO" name="cndok"></td>
</tr>
</table>
</form>
附：常見數據庫分頁查詢語句
1.oracle數據庫分頁
select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>=startrow
2.DB2數據庫分頁
Select * from (select rownumber() over() as rc,a.* from (select * from 表名 order by列名) as a) where rc between startrow and endrow
3.SQL Server 2000數據庫分頁
Select top pagesize * from 表名 where 列名 not in(select top pagesize*page 列名 from 表名 order by列名) order by列名
4.SQL Server 2005數據庫分頁
Select * from (select 列名,row_number() over(order by 列名1) as 別名from 表名) as t where t.列名1>=startrow and t.列名1<=endrow
5.MySQL數據庫分頁
Select * from 表名 limit startrow,pagesize
(Pagesize為每頁顯示的記錄條數)
6.PostgreSQL數據庫分頁
Select * from 表名 limit pagesize,offset startrow
(Pagesize為每頁顯示的記錄條數)
轉載請注明原文地址：http://www.cnblogs.com/ygj0930/p/6134851.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
