利用CSS樣式實(shí)現(xiàn)分頁打印

用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)行分頁打印。但是對(duì)于<br>和<hr>對(duì)象不起作用。其語法格式如下：

參數(shù)說明：

page-break：打印時(shí)在樣式控制的對(duì)象前后換頁。

after：設(shè)置對(duì)象后出現(xiàn)頁分隔符。設(shè)置為always時(shí)，始終在對(duì)象之后插入頁分隔符。

auto：需要在對(duì)象之后插入頁分隔符時(shí)插入。

always：始終在對(duì)象之后插入頁分隔符。

avoid：未支持。避免在對(duì)象后面插入分隔符。

left：未支持。在對(duì)象后面插入頁分隔符，直到它到達(dá)一個(gè)空白的左頁邊。

right：未支持。在對(duì)象后面插入頁分隔符，直到它到達(dá)一個(gè)空白的右頁邊。

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">編號(hào)</td>
<td width="27%" align="center">圖書名稱</td>
<td width="23%" align="center">內(nèi)容簡(jiǎn)介</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)的打印超級(jí)鏈接，并調(diào)用WebBrowser控件的相應(yīng)參數(shù)實(shí)現(xiàn)打印預(yù)覽及打印功能，代碼如下：

**office-print：網(wǎng)頁打印Office文件的救星**

**開篇導(dǎo)語：**

在日常工作中，我們常常遇到需要在線預(yù)覽和打印Word、Excel、PowerPoint等Office文檔的需求。然而，直接在瀏覽器中打印Office文檔往往面臨格式錯(cuò)亂、排版混亂等問題。今天，我們將聚焦一種名為"office-print"的解決方案，它能幫助我們輕松實(shí)現(xiàn)網(wǎng)頁環(huán)境下Office文檔的完美打印。本文將通過詳盡的說明和代碼實(shí)例，揭開"office-print"如何成為網(wǎng)頁打印Office文件的救星。

## **一、問題痛點(diǎn)：在線打印Office文檔的挑戰(zhàn)**

傳統(tǒng)的網(wǎng)頁打印Office文檔方法存在諸多不便，如：

- 文檔格式難以保持原始樣式；

- 復(fù)雜的表格、圖表難以完整呈現(xiàn)；

- 特殊字體和樣式丟失；

- 大量空白頁和布局錯(cuò)亂。

## **二、救星登場(chǎng)：office-print介紹**

**office-print** 是一款專為解決在線打印Office文檔而生的解決方案，它可以將Word、Excel、PowerPoint等文檔以接近原生軟件的樣式在網(wǎng)頁上展示，并提供完善的打印功能，確保打印輸出效果與原文件高度一致。

## **三、office-print的工作原理與實(shí)現(xiàn)**

**1. 文檔轉(zhuǎn)換**

首先，通過后臺(tái)服務(wù)將上傳的Office文檔轉(zhuǎn)換為HTML格式，同時(shí)盡可能保持原文件的所有樣式和格式信息。

```javascript

// 示例：使用Office轉(zhuǎn)HTML工具（如 mammoth.js）

const mammoth = require("mammoth");

mammoth.convertToHtml({ path: "document.docx" })

.then(result => {

const html = result.value;

// 將轉(zhuǎn)換后的HTML插入到網(wǎng)頁中展示

document.getElementById("preview").innerHTML = html;

})

.catch(error => {

console.error(error);

});

```

**2. HTML頁面打印優(yōu)化**

將轉(zhuǎn)換后的HTML嵌入到網(wǎng)頁中，并利用CSS進(jìn)行打印樣式優(yōu)化，確保打印時(shí)與屏幕預(yù)覽效果一致。

```css

@media print {

/* 打印樣式優(yōu)化，例如去除網(wǎng)頁無關(guān)元素、調(diào)整頁眉頁腳等 */

body {

font-size: 10pt;

background: white !important;

}

nav, footer, aside {

display: none;

}

/* 更多打印樣式優(yōu)化... */

}

```

**3. office-print庫的集成**

有些情況下，我們可以直接利用現(xiàn)有的第三方庫，如`jspdf`、`docxtemplater`等，結(jié)合`office-print`庫進(jìn)行更精細(xì)的打印控制。

```javascript

import OfficePrint from 'office-print';

OfficePrint.printDocument(document.getElementById('preview'), {

paperSize: 'A4',

margins: '1cm',

landscape: false,

fitToPage: true,

header: '這是頁眉',

footer: '這是頁腳',

beforePrint: () => {

// 打印前的準(zhǔn)備工作

afterPrint: () => {

// 打印后的清理工作

});

```

## **四、實(shí)戰(zhàn)案例與注意事項(xiàng)**

- **案例一：Word文檔在線預(yù)覽與打印**

- 使用`mammoth.js`將Word文檔轉(zhuǎn)換為HTML，并通過`office-print`實(shí)現(xiàn)打印。

- **案例二：Excel表格的打印優(yōu)化**

- 對(duì)于表格數(shù)據(jù)，確保打印時(shí)行列寬度自適應(yīng)，防止數(shù)據(jù)溢出。

- **案例三：PowerPoint幻燈片打印**

- 將每一頁幻燈片單獨(dú)轉(zhuǎn)換為HTML，并按順序排列打印。

**注意事項(xiàng)：**

- 轉(zhuǎn)換過程中可能會(huì)出現(xiàn)特殊字體丟失的問題，需要在CSS中引用相應(yīng)的Web字體。

- 對(duì)于復(fù)雜的文檔，可能需要多次嘗試和調(diào)整CSS樣式以達(dá)到最優(yōu)打印效果。

- 注意版權(quán)問題，確保使用的文檔可以合法公開打印和展示。

## **五、結(jié)語**

通過office-print，我們找到了一種有效解決網(wǎng)頁打印Office文件問題的途徑，大大提升了工作效率和用戶體驗(yàn)。隨著技術(shù)的不斷發(fā)展和完善，我們期待更多類似解決方案的出現(xiàn)，讓在線預(yù)覽和打印Office文檔變得越來越簡(jiǎn)單和可靠。在實(shí)際項(xiàng)目中，根據(jù)具體需求靈活應(yīng)用這些技術(shù)和工具，無疑將成為Web前端開發(fā)的一大利器。

擇性頁面打印乃是節(jié)約紙張與墨水的實(shí)用方法，本文將詳細(xì)講解其操作步驟。

1.打開打印設(shè)置

首要步驟是，開啟待打印文檔或網(wǎng)頁，點(diǎn)選菜單欄中的"文件"圖標(biāo)；于下拉列表內(nèi)，輕松尋得"打印"按鈕，進(jìn)而迅速開啟打印設(shè)定面板。

2.選擇要打印的頁面

在設(shè)置打印頁面時(shí)可看見預(yù)覽視窗，它展示了整體文檔或網(wǎng)頁的內(nèi)容。接著需選取所需打印頁面。

若僅需打印個(gè)別頁面，可于預(yù)覽窗口內(nèi)點(diǎn)選所需頁面；若是連續(xù)多頁，可按住Shift鍵并選取首尾兩頁間的頁面；若為非連續(xù)多頁，則可按住Ctrl鍵逐個(gè)單擊以選定。

3.設(shè)置打印范圍

首先確定需打印頁面，隨后進(jìn)行打印范圍設(shè)定。在打印設(shè)置界面內(nèi)尋找“頁面范圍”等相應(yīng)選項(xiàng)，可點(diǎn)選“選定頁面”或“自定義范圍”實(shí)施操作。

當(dāng)您選擇“選定的頁面”選項(xiàng)時(shí)，系統(tǒng)會(huì)自動(dòng)識(shí)別并默認(rèn)當(dāng)前預(yù)覽窗口中的所選頁面為打印區(qū)域。而若您選用“自定義范圍”選項(xiàng)，就需自行輸入欲打印頁面的具體頁碼。

4.完成設(shè)置并開始打印

最后，請(qǐng)調(diào)整好所有打印設(shè)置，然后單擊"打印"按鈕進(jìn)行打印。在此之前，不妨先行預(yù)覽，確認(rèn)所有設(shè)置均無誤，同時(shí)確認(rèn)所選頁面與所需打印范圍亦相符。

尊敬的用戶，當(dāng)您按下"打印"按鍵時(shí)，系統(tǒng)將會(huì)立即啟動(dòng)編輯過程以輸出您選擇的頁面。過程結(jié)束前請(qǐng)稍作等候，我們將竭誠為您提供滿意的服務(wù)。

遵循上述四步操作，可便捷實(shí)現(xiàn)頁面選擇性打印。既省資源又增效，期待對(duì)各位讀者帶來助力。

在線咨詢

上一篇：HTML 實(shí)例
下一篇：HTML DOM INPUT FILE 大文件上傳源代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

利用CSS樣式實(shí)現(xiàn)分頁打印

您的項(xiàng)目需求