使用 Javascript 打印多页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8823575/
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
Printing multiple pages with Javascript
提问by Camrin Parnell
I have a website where users click a read more button so that they can view the rest of the information on the page. I am curious how I could make it so that users do not have to print each page seperately. I would like to be able to make it so that I could have a script that print's related pages. I'f anyone could help me out and point me in the right direction it would be greatly appreciated. I need this functionality to work in all browsers.
我有一个网站，用户可以点击阅读更多按钮，以便他们可以查看页面上的其余信息。我很好奇我是如何做到的，这样用户就不必单独打印每一页。我希望能够制作它，以便我可以有一个打印相关页面的脚本。如果有人可以帮助我并指出我正确的方向，我将不胜感激。我需要这个功能在所有浏览器中工作。
Thanks
谢谢
采纳答案by Jay Tomten
What you will need to pull this off is a stylesheet that utilizes media styles. It is basically like having two seperate stylesheets; one for printing and one for viewing. In order to be bandwidth conservative leave the printareaempty until the request is made. On the request event fill in the printareawith the whole print you with to do. I would suggest you look into jQuery and their load and ajax requests for this.
您需要完成的是一个利用媒体样式的样式表。它基本上就像有两个单独的样式表；一份用于打印，一份用于查看。为了节省带宽，请printarea在发出请求之前留空。在请求事件上填写printarea完整的打印你要做什么。我建议您查看 jQuery 及其对此的负载和 ajax 请求。
@media screen
{
#screenarea
{
display: block;
}
#printarea
{
display: none;
}
}
@media print
{
#screenarea
{
display: none;
}
#printarea
{
display: block;
}
}
回答by senortim
After you have all your content in a single web page (using either injection or a server process), formatting pages uses CSS attributes for @media print, e.g.:
在单个网页中拥有所有内容后（使用注入或服务器进程），格式化页面使用 @media 打印的 CSS 属性，例如：
@media print {
h1 {page-break-before: always;}
}
Other attributes are "page-break-after" and "page-break-inside", the latter of which helps avoid breaks inside content.
其他属性是“page-break-after”和“page-break-inside”，后者有助于避免内容内部的中断。
回答by MCSI
I think that you can print it on an iframe inside a layer
我认为您可以将其打印在层内的 iframe 上
tihs is an example (not very nice, but works for the idea):
tihs 是一个例子（不是很好，但适用于这个想法）：
回答by David
In general, you wouldn't use JavaScript to access multiple pages and print them. (If it's even possible, it sounds like it would be a bit of a hack.)
通常，您不会使用 JavaScript 访问多个页面并打印它们。（如果有可能的话，听起来有点像黑客。）
Instead, you'd probably want to have one page which contains all of the information to be printed, CSS-styled for printability, which the user would view and be able to print. (In this case you can easily use JavaScript to initiate the print action.)
相反，你可能希望有一个网页，其中包含了所有的信息将被打印出来，CSS风格的印刷适性，其用户将查看并能够打印。（在这种情况下，您可以轻松地使用 JavaScript 来启动打印操作。）
Perhaps a "print all" link which directs the user to a page (or opens a page in a new target) which contains all of the information for printing?
也许“打印全部”链接将用户定向到包含所有打印信息的页面（或在新目标中打开页面）？
You could even take it a step further and make it a little more dynamic. Maybe have checkboxes next to the headings for each section of information and a button to "print selected" which would post the selections to the server and render only the selected information to the "print all" page.
你甚至可以更进一步，让它更有活力。也许在每个信息部分的标题旁边都有复选框，还有一个“打印所选”按钮，它将选择发布到服务器并仅将所选信息呈现到“打印所有”页面。
I just feel that, as a user, this would adhere more to least astonishmentthan something that prints things I didn't even download in the first place (where you also run the risk of sending too much to a user's printer and wasting their resources).
我只是觉得，作为用户，这比打印我一开始甚至没有下载的东西的东西更能保持最少的惊讶（在这种情况下，您还冒着向用户的打印机发送太多信息并浪费他们资源的风险） ）。
Edit:
编辑：
Another approach that just occurred to me. Does all of the content need to be on separate pages in the first place? Maybe just put the content in divs which are hidden by default, and the "read more" link shows the associated div. Then all you need for the printability is the aforementioned CSS media style. When viewing in the browser they can expand/collapse information sections individually, but when the page is printed everything is expanded.
我刚刚想到的另一种方法。是否首先需要将所有内容放在单独的页面上？也许只是将内容放在div默认隐藏的 s 中，“阅读更多”链接显示关联的div. 那么你需要的只是上述 CSS 媒体样式的可打印性。在浏览器中查看时，他们可以单独展开/折叠信息部分，但在打印页面时，所有内容都会展开。
回答by Anders Tornblad
My gut feeling first told me that it would require a server-based solution, because the window.printfunction only prints what is in the current document, and that you should write server code to produce a web page consisting of all the pages you want to print, and invoke window.printfrom that page.
我的直觉首先告诉我它需要一个基于服务器的解决方案，因为该window.print函数只打印当前文档中的内容，并且您应该编写服务器代码来生成一个包含您要打印的所有页面的网页，并window.print从该页面调用。
But you could make jQuery work for you, downloading the pages to be printed using .loadfunction, and then after all pages are loaded, invoke window.print. If you can't use jQuery for some reason, you could write the entire plumbing yourself using XHR.
但是你可以让 jQuery 为你工作，使用.load函数下载要打印的页面，然后在所有页面加载后，调用window.print. 如果由于某种原因不能使用 jQuery，则可以使用 XHR 自己编写整个管道。
It is difficult to provide a more detailed answer without having any information about the structure of your web app.
如果没有关于 Web 应用程序结构的任何信息，就很难提供更详细的答案。
