用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)系。