整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
用CSS樣式實現(xiàn)分頁打印，其主要應(yīng)用thead標記、tfoot標記和page-break-after屬性。
（1）thead標記
thead用于設(shè)置表格的表頭。
（2）tfoot標記
tfoot用于設(shè)置表格的表尾。
（3）page-break-after屬性
page-break-after屬性在打印文檔時發(fā)生作用，用于進行分頁打印。但是對于<br>和<hr>對象不起作用。其語法格式如下：
page-break-after：auto | always | avoid | left | right | null
參數(shù)說明：
page-break：打印時在樣式控制的對象前后換頁。
after：設(shè)置對象后出現(xiàn)頁分隔符。設(shè)置為always時，始終在對象之后插入頁分隔符。
auto：需要在對象之后插入頁分隔符時插入。
always：始終在對象之后插入頁分隔符。
avoid：未支持。避免在對象后面插入分隔符。
left：未支持。在對象后面插入頁分隔符，直到它到達一個空白的左頁邊。
right：未支持。在對象后面插入頁分隔符，直到它到達一個空白的右頁邊。
null：空白字符串。取消了分隔符設(shè)置。
WebBrowser.ExecWB的完整說明
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
<input name=Button .Click=document.all.WebBrowser.ExecWB(1,1) type=button value=打開>
<input name=Button .Click=document.all.WebBrowser.ExecWB(2,1) type=button value=關(guān)閉所有>
<input name=Button .Click=document.all.WebBrowser.ExecWB(4,1) type=button value=另存為>
<input name=Button .Click=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
<input name=Button .Click=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
<input name=Button .Click=document.all.WebBrowser.ExecWB(7,1) type=button value=打印預(yù)覽>
<input name=Button .Click=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設(shè)置>
<input name=Button .Click=document.all.WebBrowser.ExecWB(10,1) type=button value=屬性>
<input name=Button .Click=document.all.WebBrowser.ExecWB(17,1) type=button value=全選>
<input name=Button .Click=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
<input name=Button .Click=document.all.WebBrowser.ExecWB(45,1) type=button value=關(guān)閉>運用CSS樣式實現(xiàn)分頁打印。其具體步驟如下：
（1）編寫用于控制指定內(nèi)容不打印的CSS樣式，代碼如下。
@media print{
.bgnoprint{
background:display:none;
}
.noprint{
display:none
}
}（2）應(yīng)用include命令連接數(shù)據(jù)源文件，并應(yīng)用do…while循環(huán)語句輸出圖書信息到瀏覽器，并設(shè)置好表頭、表尾及打印分頁，關(guān)鍵代碼如下：
<?php include "conn/conn.php"; ?>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="27" align="center" style=" font-size:14px;"><b>圖書信息查詢</b></td>
</tr>
</table>
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" bordercolor="#FFFFFF" bordercolordark="#000000" bordercolorlight="#FFFFFF" >
<thead style="display:table-header-group;"> <!--設(shè)置表頭-->
<tr bgcolor="#EFEFEF">
<td width="6%" height="20" align="center">編號</td>
<td width="27%" align="center">圖書名稱</td>
<td width="23%" align="center">內(nèi)容簡介</td>
<td width="8%" align="center">定價</td>
<td width="10%" align="center">作者</td>
<td width="15%" align="center">出版社</td>
<td width="11%" align="center">發(fā)行時間</td>
</tr>
</thead>
<!--控制分頁-->
<?php
$sql=mysql_query("select * from tb_book");
$info=mysql_fetch_array($sql);
$row=1;
do{
?>
<tr align="center" <?php if($row==2){ ?>style="page-break-after:always"<?php } ?>>
<td bgcolor="#FFFFFF"><?php echo $info[id];?></td>
<td height="25" align="left" bgcolor="#FFFFFF"> <?php echo $info[bookname];?></td>
<td align="left" bgcolor="#FFFFFF"> <?php echo $info[synopsis];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[price];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[maker];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[publisher];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[issuDate];?></td>
</tr>
<?php
$row++;
}while($info=mysql_fetch_array($sql))
?>
<!--設(shè)置表尾-->
<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
</table>（3）建立HTML的object標簽，調(diào)用WebBrowser控件，代碼如下：
<object id="Wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0">
</object>（4）建立相關(guān)的打印超級鏈接，并調(diào)用WebBrowser控件的相應(yīng)參數(shù)實現(xiàn)打印預(yù)覽及打印功能，代碼如下：
最近在業(yè)務(wù)上遇到了一個問題是要將頁面打印輸出成pdf文件，通過點擊一個按鈕，就能夠?qū)㈨撁鎸懺谝粋€pdf上，并下載下來，需要保證pdf的內(nèi)容具有很好的可讀性。
經(jīng)評估要實現(xiàn)這個需求，一種可行的方案是將HTML頁面轉(zhuǎn)為PDF，并實現(xiàn)下載。通過技術(shù)調(diào)研，最終的方案確定為通過html2canvas + jspdf這兩個庫來實現(xiàn)，通過使用html2canvas提供的方法，將頁面元素轉(zhuǎn)為base64圖片流，然后將其插入jspdf插件中，實現(xiàn)保存并下載pdf。
html2canvas + jspdf方案是前端實現(xiàn)頁面打印的一種常用方案，但是在實踐過程中，遇到的最大問題就是分頁截斷的問題：當頁面元素超過一頁A4紙的時候，連續(xù)的頁面就會因為分頁而導(dǎo)致內(nèi)容被截斷，進而影響了pdf的可讀性。
由于網(wǎng)上關(guān)于分頁截斷的解決思路比較少，所以特意將此次的解決方案記錄下來。
首先，我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。
創(chuàng)建一個 JSPDF 實例，設(shè)置頁面的大小、方向和其他參數(shù)。參考官網(wǎng)可以寫一個很簡單的實例
var doc=new jsPDF({
orientation: 'landscape',
unit: 'in',
format: [4, 2]
}
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')
生成一個pdf文件，并且在文件中寫入一定內(nèi)容，其實JSPDF這個庫就能做到。
但是很多業(yè)務(wù)場景下，我們的目標內(nèi)容會更復(fù)雜，而且還要考慮樣式，所以最好的方式是引入html2canvas這個庫，將頁面元素轉(zhuǎn)換成base64數(shù)據(jù)，然后貼在pdf中(使用addImage方法），這樣就能保證頁面的內(nèi)容。
引入了html2canvas庫后，我們更多關(guān)注是利用現(xiàn)成組件庫、框架或者原生html和css實現(xiàn)更復(fù)雜的頁面內(nèi)容。
使用 html2canvas 捕捉 HTML 內(nèi)容或特定的 HTML 元素，并將其轉(zhuǎn)換為 Canvas。其中，html2canvas 函數(shù)的主要用法是：
html2canvas(element, options);
以下是一些常見的配置選項：
下面是一個簡單的demo，可以看到html2canvas能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">dom元素轉(zhuǎn)化為一張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數(shù)據(jù)流】;
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中的坐標系統(tǒng)，此示例還在pdf文檔中生成了間距為10px的網(wǎng)格系統(tǒng)。
了解了上面的三個關(guān)鍵點，接下來我們將這三個步驟串聯(lián)起來，實現(xiàn)一個基本的html→pdf的方案。大致步驟如下：
基于這5個步驟，可以實現(xiàn)基本的頁面打印。
import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';
// 將元素轉(zhuǎn)化為canvas元素
// 通過 放大 提高清晰度
// width為內(nèi)容寬度
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轉(zhuǎn)化后的寬高
const { width: canvasWidth, height: canvasHeight }=canvas;
// 轉(zhuǎn)化成圖片Data
const canvasData=canvas.toDataURL('image/jpeg', 1.0);
return { width: canvasWidth, height: canvasHeight, data: canvasData };
}
/**
* 生成pdf(A4多頁pdf截斷問題， 包括頁眉、頁腳 和 上下左右留空的護理)
*/
export async function generatePDF({
/** pdf內(nèi)容的dom元素 */
element,
/** pdf文件名 */
filename
}) {
if (!(element instanceof HTMLElement)) {
return;
}
const pdf=new jsPDF();
// 一頁的高度， 轉(zhuǎn)換寬度為一頁元素的寬度
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);
}
通常，在我們的實踐中，會發(fā)現(xiàn)2個問題：
這兩個問題的解決方案是等比例縮放+循環(huán)移位：
通過比例縮放，實現(xiàn)頁面內(nèi)容等比例展示在pdf文檔中
令頁面元素的寬高為x, y（轉(zhuǎn)化成canvas圖片的寬高），pdf文檔的寬高為w, h。因為高度可以通過加頁延伸，所以可以按照寬度進行縮放，縮放后的圖片高度可以通過下列公式計算
如果頁面的高度超出了pdf文檔的高度，即y > h，使用addPage方法添加一頁即可。但是在新的一頁中，我們的圖片內(nèi)容的高度需要調(diào)整。
假設(shè)y=2 * h，這意味我們需要兩頁才能完整得展示頁面內(nèi)容。在一頁pdf中，圖片在起始位置插入即可，即
PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是縮放后的大小
在第二頁pdf中，圖片的縱向位置需要調(diào)整一頁pdf的高度，即
PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是縮放后的大小
通過循環(huán)計算剩余高度，然后不停調(diào)整縱向位置移動base64的圖片位置，可以解決多頁的問題。
盡管 JSPDF 和 html2canvas 是功能強大的工具，但是他們也有很多槽點，比如得手動分頁，手動處理分頁截斷的問題。等你實踐到這一步，就開始面臨分頁截斷的問題，類似的問題也有網(wǎng)友在Github上提出，但是底下依然沒有很好的解決思路。
好在掘金上有人分享了一個不錯的方法：
jsPDF + html2canvas A4分頁截斷 完美解決方案（含代碼 + 案例） - 掘金
概括一下，其處理分頁截斷的原理就是在使用addImage之前，將html進行分頁，通過維護一個高度位置數(shù)據(jù)，來記錄每次循環(huán)迭代addImage的位置。
從高到低遍歷維護一個分頁數(shù)組pages，該數(shù)組記錄每一頁的起始位置，如：pages[0] 對應(yīng) 第一頁起始位置，pages[1] 對應(yīng)第二頁起始位置
Untitled2.png
接下來我們重點討論如何將頁面進行切割，然后生成pages這個數(shù)組。
假設(shè)頁面的高度是1500，pdf寬高是[500, 900]，如果不用處理分頁截斷的問題，我們可以想到第一頁（0-900）是用來承載頁面從高度為0到900的信息；
第二頁（900-1800）是用來承載頁面從高度900到1500的，所以pages數(shù)組為[0, 900]。
如果要處理分頁截斷呢，這時候就需要計算頁面元素的距離pdf文檔起始位置的高度h1，以及該元素的內(nèi)部高度h2，通過這兩個高度來判斷這個元素要不要放在下一頁，防止截斷，示意圖如下：
Untitled4.png
如果h1 + h2 > 頁面高度， 這時候說明這個元素不處理的就會被分頁截斷，所以應(yīng)該要把這個元素放到第二頁去渲染，這就意味著pages記錄的數(shù)據(jù)要變化，示意圖如下，可以看到pages[1]我們往上調(diào)整了，比第二頁pdf的起始位置更高。
Untitled5.png
說明渲染第二頁pdf的時候，要從h1開始渲染，pages數(shù)組為[0, h1]，解釋為第一頁pdf渲染頁面高度區(qū)域為0-900, 第二頁pdf渲染html高度區(qū)域為h1-1500。注意到第一頁渲染的時候到尾部的時候，會有部分內(nèi)容和第二頁頭部內(nèi)容重合。因為h1到900這部分的內(nèi)容肯定會渲染，這部分內(nèi)容一直都是頁面元素，我們改變pages[1]的值的原因只是創(chuàng)建一個副本，讓頁面看起來內(nèi)容沒有被截斷。
為了解決這個問題（為了美觀），我們用填充一塊白色區(qū)域遮掉它！此處使用jspdf的rect和setFillColor方法，把重合的區(qū)域遮白處理。
pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');
上面我們談到了h1和h2，其中h1是元素盒子的上邊距到打印區(qū)域的高度（比例縮放后的高度），h2是元素盒子的內(nèi)部高度。
計算h1: getBoundingClientRect方法
const rect=contentElement.getBoundingClientRect() || {};
const topDistance=rect.top;
return topDistance;
Untitled6.png
計算h2：offsetHeight方法
Untitled7.png
值得注意的是，因為打印區(qū)域的html元素不一定是從窗口頂部開始，所以為了計算實際的h1(元素到打印區(qū)域的頂部距離），可以采用這樣的方法：
// 對pages進行一個值的修正，因為pages生成是根據(jù)根元素來的，根元素并不是我們實際要打印的元素，而是element，
// 所以要把它修正，讓其值是以真實的打印元素頂部節(jié)點為準
const newPages=pages.map((item)=> item - pages[0]);
上述即是在實現(xiàn)前端頁面生成pdf的過程中遇到的問題，以及解決思路。
為了更直觀得感受效果，本文也給出了不同場景（單頁、多頁、多頁截斷、自定義頁眉頁腳、橫向）下的pdf生成效果，可以通過此鏈接體驗：https://pdf-demo-phi.vercel.app/
此demo的源代碼如下：pdf-demo
與現(xiàn)有文章不同的是，本倉庫的代碼特點在于：
作者:燕平
來源:微信公眾號:Goodme前端團隊
出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA
數(shù)據(jù)能夠打印到pdf文件，當然可以打印到紙張，而且使用qprinter默認就是打印到紙張的，上一篇文章寫得功能是打印到pdf，其實還要單獨特殊設(shè)置打印到文件，并指定格式為pdf。不指定輸出文件和格式默認就是打印到紙張，關(guān)于Qt打印內(nèi)容到紙張，網(wǎng)上的辦法非常多，比如有些直接用painter繪制，逐步控制分頁打印，個人還是喜歡html格式的內(nèi)容傳入，因為html格式相當靈活，可控范圍相當大，而且整齊，甚至可以先直接輸出到網(wǎng)頁預(yù)覽下效果，根據(jù)需求調(diào)整，后面的圖文混排就是用的html+table實現(xiàn)的，如果不需要邊框可以設(shè)置邊框粗細為0，其實還是表格，但是看起來像文檔一樣。
數(shù)據(jù)打印基本步驟：
1. 準備好要打印的數(shù)據(jù)。
2. 實例化QPrinter對象。
3. 設(shè)置輸出格式setOutputFormat(QPrinter::NativeFormat)。
4. 彈出打印預(yù)覽對話框QPrintPreviewDialog。
5. 關(guān)聯(lián)信號槽在槽函數(shù)中繪制內(nèi)容。
6. 實例化文檔對象QTextDocument。
7. 將內(nèi)容作為html設(shè)置到文檔對象。
8. 調(diào)用文檔對象的print方法傳入QPrinter對象打印。
結(jié)構(gòu)體支持的參數(shù)：
- 文件名稱
- 表名
- 主標題
- 副標題
- 字段名稱集合
- 字段寬度集合
- 內(nèi)容集合
- 行內(nèi)容分隔符
- 子內(nèi)容分隔符
- 邊框?qū)挾?/p>
- 校驗列
- 校驗類型
- 校驗值
- 檢驗顏色
- 最后列拉伸填充
- 橫向排版
- 紙張邊距
1. 組件同時集成了導(dǎo)出數(shù)據(jù)到csv、xls、pdf和打印數(shù)據(jù)。
2. 所有操作全部提供靜態(tài)方法無需new，數(shù)據(jù)和屬性等各種參數(shù)設(shè)置采用結(jié)構(gòu)體數(shù)據(jù)，極為方便。
3. 同時支持QTableView、QTableWidget、QStandardItemModel、QSqlTableModel等數(shù)據(jù)源。
4. 提供靜態(tài)方法直接傳入QTableView、QTableWidget控件，自動識別列名、列寬和數(shù)據(jù)內(nèi)容。
5. 每組功能都提供單獨的完整的示例，注釋詳細，非常適合各階段Qter程序員。
6. 原創(chuàng)導(dǎo)出數(shù)據(jù)機制，不依賴任何office組件或者操作系統(tǒng)等第三方庫，支持嵌入式linux。
7. 速度超快，9個字段10萬行數(shù)據(jù)只需要2秒鐘完成。
8. 只需要四個步驟即可開始急速導(dǎo)出海量數(shù)據(jù)比如100W條記錄到Excel。
9. 同時提供直接寫入數(shù)據(jù)接口和多線程寫入數(shù)據(jù)接口，不卡主界面。
10. 可設(shè)置標題、副標題、表名。
11. 可設(shè)置導(dǎo)出數(shù)據(jù)的字段名、列名、列寬。
12. 可設(shè)置末尾列自動拉伸填充，默認拉伸更美觀。
13. 可設(shè)置是否啟用校驗過濾數(shù)據(jù)，啟用后符合規(guī)則的數(shù)據(jù)特殊顏色顯示。
14. 可指定校驗的列、校驗規(guī)則、校驗值、校驗值數(shù)據(jù)類型。
15. 校驗規(guī)則支持 精確等于==、大于>、大于等于>=、小于<、小于等于<=、不等于!=、包含contains。
16. 校驗值數(shù)據(jù)類型支持 整型int、浮點型float、雙精度型double，默認文本字符串類型。
17. 可設(shè)置隨機背景顏色及需要隨機背景色的列集合。
18. 支持分組輸出數(shù)據(jù)，比如按照設(shè)備分組輸出數(shù)據(jù)，方便查看。
19. 可設(shè)置csv分隔符、行內(nèi)容分隔符、子內(nèi)容分隔符。
20. 可設(shè)置邊框?qū)挾取⒆詣犹顢?shù)據(jù)類型，默認自動數(shù)據(jù)類型開啟。
21. 可設(shè)置是否開啟數(shù)據(jù)單元格樣式，默認不開啟，不開啟可以節(jié)約大概30%的文件體積。
22. 可設(shè)置橫向排版、紙張邊距等，比如導(dǎo)出到pdf以及打印數(shù)據(jù)。
23. 支持圖文混排導(dǎo)出數(shù)據(jù)到pdf以及打印數(shù)據(jù)，自動分頁。
24. 靈活性超高，可自由更改源碼設(shè)置對齊方式、文字顏色、背景顏色等。
25. 支持任意excel表格軟件，包括但不限于excel2003-2021、wps、openoffice等。
26. 純Qt編寫，支持任意Qt版本+任意編譯器+任意系統(tǒng)。
1. 體驗地址：[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取碼：o05q 文件名：bin_dataout.zip
2. 國內(nèi)站點：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)
3. 國際站點：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)
4. 個人主頁：[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)
5. 知乎主頁：[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
