javascript 如何使用php下载/打印页面的特定部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5125641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to download/print specific portion of a page using php
提问by Aadi
I have an HTML page as follows
我有一个 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>
How can make only the table downloadable and printable using php and/or javascript.
如何使用 php 和/或 javascript 仅使表格可下载和打印。
采纳答案by Dan Grossman
Create a print stylesheet that sets everything but the table to display: none. The browser takes care of printing, not your code, and uses your print stylesheet when doing so.
创建一个打印样式表，将除表之外的所有内容设置为display: none. 浏览器负责打印，而不是您的代码，并在执行此操作时使用您的打印样式表。
回答by Ratheesh
do you want to print a part of the web page? do you have multiple print buttons in a web page, which prints portion of the page? do you want to exclude some elements in print of your page? (like images, ads) do you want to print the display page differently? (changing font or colors of text) Here, I am going to give code examples to above questions
你想打印网页的一部分吗？您是否在网页中有多个打印按钮，用于打印页面的一部分？您想排除页面打印中的某些元素吗？（如图像、广告）您想以不同的方式打印显示页面吗？（更改文本的字体或颜色）在这里，我将给出上述问题的代码示例
Let us take a sample HTML web page
让我们看一个示例 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>
if you want to print the whole page then
如果你想打印整页然后
<script language="javascript">
function printPage() {
window.print();
}
</script>
To Print a part of the web page: – create a print window and write html text you wanted to print – focus the window and call the “print()” function – close the print window
要打印网页的一部分： – 创建一个打印窗口并编写您想要打印的 html 文本 – 聚焦窗口并调用“print()”函数 – 关闭打印窗口
Here is the modified printPage function
这是修改后的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();
}
You can hide some of the elements within your actual content by adding style elements or
您可以通过添加样式元素或
include css file in print window html
在打印窗口 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>";
.....
}
In the above example, I have added style and css file, you can use either one or both. Using these styles or css, we can style the text only for print. If you have multiple print buttons, and each one prints selected area of a web page, then you need to pass id of the print area on each button click.
在上面的示例中，我添加了样式和 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>
Just change the fields with your requirements
只需根据您的要求更改字段
