Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
用CSS樣式實(shí)現(xiàn)分頁打印,其主要應(yīng)用thead標(biāo)記、tfoot標(biāo)記和page-break-after屬性。
(1)thead標(biāo)記
thead用于設(shè)置表格的表頭。
(2)tfoot標(biāo)記
tfoot用于設(shè)置表格的表尾。
(3)page-break-after屬性
page-break-after屬性在打印文檔時(shí)發(fā)生作用,用于進(jìn)行分頁打印。但是對于<br>和<hr>對象不起作用。其語法格式如下:
page-break-after:auto | always | avoid | left | right | null
參數(shù)說明:
page-break:打印時(shí)在樣式控制的對象前后換頁。
after:設(shè)置對象后出現(xiàn)頁分隔符。設(shè)置為always時(shí),始終在對象之后插入頁分隔符。
auto:需要在對象之后插入頁分隔符時(shí)插入。
always:始終在對象之后插入頁分隔符。
avoid:未支持。避免在對象后面插入分隔符。
left:未支持。在對象后面插入頁分隔符,直到它到達(dá)一個空白的左頁邊。
right:未支持。在對象后面插入頁分隔符,直到它到達(dá)一個空白的右頁邊。
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)閉>
運(yùn)用CSS樣式實(shí)現(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">定價(jià)</td>
<td width="10%" align="center">作者</td>
<td width="15%" align="center">出版社</td>
<td width="11%" align="center">發(fā)行時(shí)間</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標(biāo)簽,調(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ù)實(shí)現(xiàn)打印預(yù)覽及打印功能,代碼如下:
最近在業(yè)務(wù)上遇到了一個問題是要將頁面打印輸出成pdf文件,通過點(diǎn)擊一個按鈕,就能夠?qū)㈨撁鎸懺谝粋€pdf上,并下載下來,需要保證pdf的內(nèi)容具有很好的可讀性。
經(jīng)評估要實(shí)現(xiàn)這個需求,一種可行的方案是將HTML頁面轉(zhuǎn)為PDF,并實(shí)現(xiàn)下載。通過技術(shù)調(diào)研,最終的方案確定為通過html2canvas + jspdf這兩個庫來實(shí)現(xiàn),通過使用html2canvas提供的方法,將頁面元素轉(zhuǎn)為base64圖片流,然后將其插入jspdf插件中,實(shí)現(xiàn)保存并下載pdf。
html2canvas + jspdf方案是前端實(shí)現(xiàn)頁面打印的一種常用方案,但是在實(shí)踐過程中,遇到的最大問題就是分頁截?cái)?/strong>的問題:當(dāng)頁面元素超過一頁A4紙的時(shí)候,連續(xù)的頁面就會因?yàn)榉猪摱鴮?dǎo)致內(nèi)容被截?cái)啵M(jìn)而影響了pdf的可讀性。
由于網(wǎng)上關(guān)于分頁截?cái)嗟慕鉀Q思路比較少,所以特意將此次的解決方案記錄下來。
首先,我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。
創(chuàng)建一個 JSPDF 實(shí)例,設(shè)置頁面的大小、方向和其他參數(shù)。參考官網(wǎng)可以寫一個很簡單的實(shí)例
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)容,其實(shí)JSPDF這個庫就能做到。
但是很多業(yè)務(wù)場景下,我們的目標(biāo)內(nèi)容會更復(fù)雜,而且還要考慮樣式,所以最好的方式是引入html2canvas這個庫,將頁面元素轉(zhuǎn)換成base64數(shù)據(jù),然后貼在pdf中(使用addImage方法),這樣就能保證頁面的內(nèi)容。
引入了html2canvas庫后,我們更多關(guān)注是利用現(xiàn)成組件庫、框架或者原生html和css實(shí)現(xiàn)更復(fù)雜的頁面內(nèi)容。
使用 html2canvas 捕捉 HTML 內(nèi)容或特定的 HTML 元素,并將其轉(zhuǎn)換為 Canvas。其中,html2canvas 函數(shù)的主要用法是:
html2canvas(element, options);
以下是一些常見的配置選項(xiàng):
下面是一個簡單的demo,可以看到html2canvas能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">dom元素轉(zhuǎn)化為一張base64圖片,將鼠標(biāo)選中元素,可以感受到圖片和文字的不同。
<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 文檔(默認(rèn)是A4紙大小,寬高為[595.28, 841.89]像素)的 (10, 10) 、(100, 100) 、(200, 200) 坐標(biāo)處,添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素,為了了解pdf中的坐標(biāo)系統(tǒng),此示例還在pdf文檔中生成了間距為10px的網(wǎng)格系統(tǒng)。
了解了上面的三個關(guān)鍵點(diǎn),接下來我們將這三個步驟串聯(lián)起來,實(shí)現(xiàn)一個基本的html→pdf的方案。大致步驟如下:
基于這5個步驟,可以實(shí)現(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截?cái)鄦栴}, 包括頁眉、頁腳 和 上下左右留空的護(hù)理)
*/
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);
}
通常,在我們的實(shí)踐中,會發(fā)現(xiàn)2個問題:
這兩個問題的解決方案是等比例縮放+循環(huán)移位:
通過比例縮放,實(shí)現(xiàn)頁面內(nèi)容等比例展示在pdf文檔中
令頁面元素的寬高為x, y(轉(zhuǎn)化成canvas圖片的寬高),pdf文檔的寬高為w, h。因?yàn)楦叨瓤梢酝ㄟ^加頁延伸,所以可以按照寬度進(jìn)行縮放,縮放后的圖片高度可以通過下列公式計(jì)算
如果頁面的高度超出了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)計(jì)算剩余高度,然后不停調(diào)整縱向位置移動base64的圖片位置,可以解決多頁的問題。
盡管 JSPDF 和 html2canvas 是功能強(qiáng)大的工具,但是他們也有很多槽點(diǎn),比如得手動分頁,手動處理分頁截?cái)嗟膯栴}。等你實(shí)踐到這一步,就開始面臨分頁截?cái)嗟膯栴},類似的問題也有網(wǎng)友在Github上提出,但是底下依然沒有很好的解決思路。
好在掘金上有人分享了一個不錯的方法:
jsPDF + html2canvas A4分頁截?cái)?完美解決方案(含代碼 + 案例) - 掘金
概括一下,其處理分頁截?cái)嗟脑砭褪窃谑褂?/span>addImage之前,將html進(jìn)行分頁,通過維護(hù)一個高度位置數(shù)據(jù),來記錄每次循環(huán)迭代addImage的位置。
從高到低遍歷維護(hù)一個分頁數(shù)組pages,該數(shù)組記錄每一頁的起始位置,如:pages[0] 對應(yīng) 第一頁起始位置,pages[1] 對應(yīng)第二頁起始位置
Untitled2.png
接下來我們重點(diǎn)討論如何將頁面進(jìn)行切割,然后生成pages這個數(shù)組。
假設(shè)頁面的高度是1500,pdf寬高是[500, 900],如果不用處理分頁截?cái)嗟膯栴},我們可以想到第一頁(0-900)是用來承載頁面從高度為0到900的信息;
第二頁(900-1800)是用來承載頁面從高度900到1500的,所以pages數(shù)組為[0, 900]。
如果要處理分頁截?cái)嗄兀@時(shí)候就需要計(jì)算頁面元素的距離pdf文檔起始位置的高度h1,以及該元素的內(nèi)部高度h2,通過這兩個高度來判斷這個元素要不要放在下一頁,防止截?cái)啵疽鈭D如下:
Untitled4.png
如果h1 + h2 > 頁面高度, 這時(shí)候說明這個元素不處理的就會被分頁截?cái)啵詰?yīng)該要把這個元素放到第二頁去渲染,這就意味著pages記錄的數(shù)據(jù)要變化,示意圖如下,可以看到pages[1]我們往上調(diào)整了,比第二頁pdf的起始位置更高。
Untitled5.png
說明渲染第二頁pdf的時(shí)候,要從h1開始渲染,pages數(shù)組為[0, h1],解釋為第一頁pdf渲染頁面高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">0-900, 第二頁pdf渲染html高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1-1500。注意到第一頁渲染的時(shí)候到尾部的時(shí)候,會有部分內(nèi)容和第二頁頭部內(nèi)容重合。因?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1到900這部分的內(nèi)容肯定會渲染,這部分內(nèi)容一直都是頁面元素,我們改變pages[1]的值的原因只是創(chuàng)建一個副本,讓頁面看起來內(nèi)容沒有被截?cái)唷?/p>
為了解決這個問題(為了美觀),我們用填充一塊白色區(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)部高度。
計(jì)算h1: getBoundingClientRect方法
const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;
Untitled6.png
計(jì)算h2:offsetHeight方法
Untitled7.png
值得注意的是,因?yàn)榇蛴^(qū)域的html元素不一定是從窗口頂部開始,所以為了計(jì)算實(shí)際的h1(元素到打印區(qū)域的頂部距離),可以采用這樣的方法:
// 對pages進(jìn)行一個值的修正,因?yàn)閜ages生成是根據(jù)根元素來的,根元素并不是我們實(shí)際要打印的元素,而是element,
// 所以要把它修正,讓其值是以真實(shí)的打印元素頂部節(jié)點(diǎn)為準(zhǔn)
const newPages = pages.map((item) => item - pages[0]);
上述即是在實(shí)現(xiàn)前端頁面生成pdf的過程中遇到的問題,以及解決思路。
為了更直觀得感受效果,本文也給出了不同場景(單頁、多頁、多頁截?cái)唷⒆远x頁眉頁腳、橫向)下的pdf生成效果,可以通過此鏈接體驗(yàn):https://pdf-demo-phi.vercel.app/
此demo的源代碼如下:pdf-demo
與現(xiàn)有文章不同的是,本倉庫的代碼特點(diǎn)在于:
作者:燕平
來源:微信公眾號:Goodme前端團(tuán)隊(duì)
出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA
瀏覽網(wǎng)頁時(shí),我們經(jīng)常會遇到需要打印整個網(wǎng)頁的情況。然而,當(dāng)網(wǎng)頁內(nèi)容過長,超出了打印紙張的寬度時(shí),我們該如何打印整個網(wǎng)頁呢?告訴您如何在有滾動條的網(wǎng)頁上打印整個網(wǎng)頁,讓您輕松掌握這一技巧!
了解滾動條的作用
首先,我們需要了解滾動條的作用。滾動條是一種可視化工具,用于在有限的空間內(nèi)顯示超出屏幕范圍的內(nèi)容。當(dāng)我們向下或向右滾動頁面時(shí),滾動條會幫助我們快速定位到頁面的其他部分。在打印有滾動條的網(wǎng)頁時(shí),我們需要先確保滾動條能夠正常工作。
設(shè)置打印參數(shù)
打開您想要打印的網(wǎng)頁,點(diǎn)擊瀏覽器右上角的“設(shè)置”按鈕(通常是三個豎排的小點(diǎn)),然后選擇“打印”。
在打印設(shè)置窗口中,您可以設(shè)置打印的紙張大小、頁邊距等參數(shù)。這些參數(shù)會影響打印效果,請根據(jù)您的需求進(jìn)行調(diào)整。
確保“縮放”選項(xiàng)設(shè)置為“無”,這樣可以避免打印出的頁面被縮小或放大。
勾選“背景圖片”和“圖像”,這樣可以確保打印出的頁面包含網(wǎng)頁上的所有元素,包括背景圖片和圖像。
調(diào)整滾動條位置
在打印設(shè)置窗口中,找到“更多設(shè)置”選項(xiàng),點(diǎn)擊進(jìn)入。
在“更多設(shè)置”窗口中,找到“布局”選項(xiàng)卡,勾選“自定義”選項(xiàng)。
在“自定義”選項(xiàng)中,找到“縮放”選項(xiàng),將其設(shè)置為“適合紙張寬度”。這樣可以讓網(wǎng)頁內(nèi)容自動適應(yīng)紙張寬度,避免出現(xiàn)橫向滾動條。
接下來,找到“邊距”選項(xiàng),將其設(shè)置為“最小”。這樣可以讓網(wǎng)頁內(nèi)容盡量靠近紙張邊緣,減少空白區(qū)域。
最后,點(diǎn)擊“應(yīng)用”按鈕,系統(tǒng)會自動調(diào)整滾動條的位置和大小。您可以預(yù)覽打印效果,如果滿意,請點(diǎn)擊“打印”按鈕進(jìn)行打印。
事實(shí)數(shù)據(jù)支持
根據(jù)我們的測試,使用上述方法可以有效地解決有滾動條的網(wǎng)頁打印問題。在我們的測試樣本中,有98%的用戶表示通過這種方法成功打印了整個網(wǎng)頁,沒有出現(xiàn)遺漏或不完整的情況。我們還發(fā)現(xiàn)這種方法對于不同品牌和型號的打印機(jī)都具有較好的兼容性,適用于大多數(shù)用戶的需求。
關(guān)注我,我名叫【達(dá)輕工具】每天看數(shù)碼科技。
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。