Question

我有一个HTML页面如下

Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<table>
    <th>WEEK</th>
    <th>DATES</th>
    <th>Workout #1</th>
    <th>Workout #2</th>
    <th>Workout #3</th>
    <tr>
        <td>1</td>
        <td>3/27-4/2</td>
        <td>Warm up for 5 minutes. </td>
        <td>Same as #1 for this week.</td>
        <td>Same as #1 for this week.</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4/3-4/9</td>
        <td>Warm up for 5 minutes. </td>
        <td>Same as #1 for this week.</td>
        <td>Same as #1 for this week.</td>
    </tr></table>

如何使用php和/或javascript只使表格可下载和打印。

Answer 1

你想打印网页的一部分吗？你在网页上有多个打印按钮，打印页面的一部分？要在页面打印中排除某些元素吗？（如图片，广告）你想以不同的方式打印显示页面吗？（更改文字的字体或颜色）在这里，我将给出上述问题的代码示例

我们来看一个示例HTML网页

<html>
    <body>
        <div id="header">Header Content</div>
        <div id="content">actual content</div>
        <div id="footer">Footer content</div>
        <input type="button" value="Print" onclick="printPage();"></input>
    </body>
</html>

如果你想打印整个页面，那么

<script language="javascript">
    function printPage() {
        window.print();
    }
</script>

要打印网页的一部分： - 创建一个打印窗口并编写您想要打印的html文本 - 聚焦窗口并调用“print（）”功能 - 关闭打印窗口

这是修改后的printPage函数

<input type="button" value="Print" onclick="printPage('content');"></input>
function printPage(id) {
    var html="<html>";
    html+= document.getElementById(id).innerHTML;
    html+="</html>";
    var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}

您可以通过添加样式元素或

隐藏实际内容中的某些元素

在打印窗口html中包含css文件

<div id="content">
    <div class="ads"> Ad content</div>
    actual content
    <img src="example.gif" />
</div>
----
function printPage(id) {
    var html="<html>";
    html+="<head>";
    html+="<style type='text/css'>#content div.ads, #content img {display:none}    </style>";
    html+="<link rel='Stylesheet' type='text/css' href='css/print.css' media='print' />";
    html+="</head>";
    html+= document.getElementById(id).innerHTML;
    html+="</html>";
.....
}

在上面的示例中，我添加了样式和css文件，您可以使用其中一个或两个。运用这些样式或CSS，我们可以将文本样式仅用于打印。如果您有多个打印按钮，并且每个按钮都打印一个网页的选定区域，那么您需要在每次点击按钮时传递打印区域的ID。

<div id="area1">Area1 content</div>
<input type="button" value="Print" onclick="printPage('area1');"></input>
<div id="area2">Area2 content</div>
<input type="button" value="Print" onclick="printPage('area2');"></input>

只需根据您的要求更改字段

Answer 2

创建一个打印样式表，将表格以外的所有内容设置为display: none。浏览器负责打印，而不是代码，并在执行此操作时使用打印样式表。

如何使用php下载/打印页面的特定部分

2 个答案:

在打印窗口html中包含css文件