整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

利用CSS样式实现分页打印

用CSS样式实现分页打印,其主要应用thead标记、tfoot标记和page-break-after属性。

(1)thead标记

thead用于设置表格的表头。

(2)tfoot标记

tfoot用于设置表格的表尾。

(3)page-break-after属性

page-break-after属性在打印文档时发生作用,用于进行分页打印。但是对于<br>和<hr>对象不起作用。其语法格式如下:

page-break-after:auto | always | avoid | left | right | null

参数说明:

page-break:打印时在样式控制的对象前后换页。

after:设置对象后出现页分隔符。设置为always时,始终在对象之后插入页分隔符。

auto:需要在对象之后插入页分隔符时插入。

always:始终在对象之后插入页分隔符。

avoid:未支持。避免在对象后面插入分隔符。

left:未支持。在对象后面插入页分隔符,直到它到达一个空白的左页边。

right:未支持。在对象后面插入页分隔符,直到它到达一个空白的右页边。

null:空白字符串。取消了分隔符设置。

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=关闭所有>
<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=打印预览>
<input name=Button .Click=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>
<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=关闭>

运用CSS样式实现分页打印。其具体步骤如下:

(1)编写用于控制指定内容不打印的CSS样式,代码如下。

@media print{
    .bgnoprint{
        background:display:none;
    }
    .noprint{
        display:none
    }
}

(2)应用include命令连接数据源文件,并应用do…while循环语句输出图书信息到浏览器,并设置好表头、表尾及打印分页,关键代码如下:

<?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;"> <!--设置表头-->
<tr bgcolor="#EFEFEF">
<td width="6%" height="20" align="center">编号</td>
<td width="27%" align="center">图书名称</td>
<td width="23%" align="center">内容简介</td>
<td width="8%" align="center">定价</td>
<td width="10%" align="center">作者</td>
<td width="15%" align="center">出版社</td>
<td width="11%" align="center">发行时间</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))
?>
<!--设置表尾-->
<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
</table>

(3)建立HTML的object标签,调用WebBrowser控件,代码如下:

<object id="Wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0">
</object>

(4)建立相关的打印超级链接,并调用WebBrowser控件的相应参数实现打印预览及打印功能,代码如下:

**office-print:网页打印Office文件的救星**

**开篇导语:**

在日常工作中,我们常常遇到需要在线预览和打印Word、Excel、PowerPoint等Office文档的需求。然而,直接在浏览器中打印Office文档往往面临格式错乱、排版混乱等问题。今天,我们将聚焦一种名为"office-print"的解决方案,它能帮助我们轻松实现网页环境下Office文档的完美打印。本文将通过详尽的说明和代码实例,揭开"office-print"如何成为网页打印Office文件的救星。

## **一、问题痛点:在线打印Office文档的挑战**

传统的网页打印Office文档方法存在诸多不便,如:

- 文档格式难以保持原始样式;

- 复杂的表格、图表难以完整呈现;

- 特殊字体和样式丢失;

- 大量空白页和布局错乱。

## **二、救星登场:office-print介绍**

**office-print** 是一款专为解决在线打印Office文档而生的解决方案,它可以将Word、Excel、PowerPoint等文档以接近原生软件的样式在网页上展示,并提供完善的打印功能,确保打印输出效果与原文件高度一致。

## **三、office-print的工作原理与实现**

**1. 文档转换**

首先,通过后台服务将上传的Office文档转换为HTML格式,同时尽可能保持原文件的所有样式和格式信息。

```javascript

// 示例:使用Office转HTML工具(如 mammoth.js)

const mammoth = require("mammoth");

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

.then(result => {

const html = result.value;

// 将转换后的HTML插入到网页中展示

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

})

.catch(error => {

console.error(error);

});

```

**2. HTML页面打印优化**

将转换后的HTML嵌入到网页中,并利用CSS进行打印样式优化,确保打印时与屏幕预览效果一致。

```css

@media print {

/* 打印样式优化,例如去除网页无关元素、调整页眉页脚等 */

body {

font-size: 10pt;

background: white !important;

}

nav, footer, aside {

display: none;

}

/* 更多打印样式优化... */

}

```

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

有些情况下,我们可以直接利用现有的第三方库,如`jspdf`、`docxtemplater`等,结合`office-print`库进行更精细的打印控制。

```javascript

import OfficePrint from 'office-print';

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

paperSize: 'A4',

margins: '1cm',

landscape: false,

fitToPage: true,

header: '这是页眉',

footer: '这是页脚',

beforePrint: () => {

// 打印前的准备工作

},

afterPrint: () => {

// 打印后的清理工作

},

});

```

## **四、实战案例与注意事项**

- **案例一:Word文档在线预览与打印**

- 使用`mammoth.js`将Word文档转换为HTML,并通过`office-print`实现打印。

- **案例二:Excel表格的打印优化**

- 对于表格数据,确保打印时行列宽度自适应,防止数据溢出。

- **案例三:PowerPoint幻灯片打印**

- 将每一页幻灯片单独转换为HTML,并按顺序排列打印。

**注意事项:**

- 转换过程中可能会出现特殊字体丢失的问题,需要在CSS中引用相应的Web字体。

- 对于复杂的文档,可能需要多次尝试和调整CSS样式以达到最优打印效果。

- 注意版权问题,确保使用的文档可以合法公开打印和展示。

## **五、结语**

通过office-print,我们找到了一种有效解决网页打印Office文件问题的途径,大大提升了工作效率和用户体验。随着技术的不断发展和完善,我们期待更多类似解决方案的出现,让在线预览和打印Office文档变得越来越简单和可靠。在实际项目中,根据具体需求灵活应用这些技术和工具,无疑将成为Web前端开发的一大利器。

择性页面打印乃是节约纸张与墨水的实用方法,本文将详细讲解其操作步骤。

1.打开打印设置

首要步骤是,开启待打印文档或网页,点选菜单栏中的"文件"图标;于下拉列表内,轻松寻得"打印"按钮,进而迅速开启打印设定面板。

2.选择要打印的页面

在设置打印页面时可看见预览视窗,它展示了整体文档或网页的内容。接着需选取所需打印页面。

若仅需打印个别页面,可于预览窗口内点选所需页面;若是连续多页,可按住Shift键并选取首尾两页间的页面;若为非连续多页,则可按住Ctrl键逐个单击以选定。

3.设置打印范围

首先确定需打印页面,随后进行打印范围设定。在打印设置界面内寻找“页面范围”等相应选项,可点选“选定页面”或“自定义范围”实施操作。

当您选择“选定的页面”选项时,系统会自动识别并默认当前预览窗口中的所选页面为打印区域。而若您选用“自定义范围”选项,就需自行输入欲打印页面的具体页码。

4.完成设置并开始打印

最后,请调整好所有打印设置,然后单击"打印"按钮进行打印。在此之前,不妨先行预览,确认所有设置均无误,同时确认所选页面与所需打印范围亦相符。

尊敬的用户,当您按下"打印"按键时,系统将会立即启动编辑过程以输出您选择的页面。过程结束前请稍作等候,我们将竭诚为您提供满意的服务。

遵循上述四步操作,可便捷实现页面选择性打印。既省资源又增效,期待对各位读者带来助力。