如何显示 HTML 文档的打印预览

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/953396/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:51:13  来源:igfitidea点击:

How to display a print preview of an HTML document

htmlbrowserprintingpreview

提问by Flupkear

I need to display some HTML content as it will be printed. Basically, I want to emulate the browser print preview feature.

我需要显示一些 HTML 内容,因为它将被打印。基本上,我想模拟浏览器打印预览功能。

I'm not sure how to do this just with HTML/CSS/JavaScript. The only solution I came up is to convert the HTML to PDF so it′s split into pages and then convert that PDF to images and print each image one bellow the other.

我不确定如何仅使用 HTML/CSS/JavaScript 来做到这一点。我想出的唯一解决方案是将 HTML 转换为 PDF,以便将其拆分为页面,然后将该 PDF 转换为图像并打印每个图像。

It will be really helpfull if someone can point a more straight forward method. I'm not even sure if this is posibble.

如果有人可以指出更直接的方法,那将非常有帮助。我什至不确定这是否可行。

BTW, I'm using PHP in the backend, so if there is a PHP class for this it will be helpfull.

顺便说一句,我在后端使用 PHP,所以如果有一个 PHP 类会有所帮助。

The page size for diplaying it will be letter no matter what the user have configured

无论用户配置什么,显示的页面大小都是字母

This how it should look in the browser: alt text

这是它在浏览器中的外观: 替代文字

采纳答案by Ropstah

I don't think this is possible. You cannot know all the users' print-settings in the browser (javascript) and definitely not on the server (php, asp, java).

我不认为这是可能的。您无法知道浏览器(javascript)中所有用户的打印设置,当然也不能在服务器(php、asp、java)上知道。

update

更新

Think about it this way (please keep in mind that a decent 100% solid print preview is NOT possible):

以这种方式思考(请记住,不可能进行体面的 100% 纯色打印预览):

  • User navigates to page and asks for a print preview
  • Website provides print preview (preferably in a html-format, otherwise png or pdf)
  • User likes and wants to print:
    1. From the browser
    2. From some image viewing/editing program (png)
    3. From Acrobat (pdf)
  • Every print solution has it's own Print... dialog. You can change print settings here.
  • 用户导航到页面并要求打印预览
  • 网站提供打印预览(最好是 html 格式,否则为 png 或 pdf)
  • 用户喜欢并想打印:
    1. 从浏览器
    2. 从一些图像查看/编辑程序(png)
    3. 来自 Acrobat (pdf)
  • 每个打印解决方案都有自己的打印...对话框。您可以在此处更改打印设置。

It's the last point where everything you want fails... You don't have control over the output anymore at that point (from your website)...

这是你想要的一切都失败的最后一点......你在那个时候不再控制输出(从你的网站)......

回答by Sasha Chedygov

As others have point out, you can't do this. My recommendation is that you make a "printer-friendly" version that just contains a plain white background and plain black text. But that's about as close as you can get to the actual "print preview".

正如其他人指出的那样,你不能这样做。我的建议是您制作一个“打印机友好”版本,只包含纯白色背景和纯黑色文本。但这与实际的“打印预览”差不多。

回答by whatsisname

HTML wasn't really meant for page layout, it was meant to be read on screen. Why is the browsers page preview not good enough?

HTML 并不是真正用于页面布局,而是用于在屏幕上阅读。为什么浏览器页面预览不够好?

Anyways, what you could do is try and convert the html to latex or something similar, and render that to a pdf or png on the server side and display that. But that would preclude using very complicated html layouts otherwise it will get pretty nasty.

无论如何,您可以做的是尝试将 html 转换为乳胶或类似的东西,然后在服务器端将其渲染为 pdf 或 png 并显示它。但这将排除使用非常复杂的 html 布局,否则它会变得非常讨厌。

回答by Abhijeet Pathak

I think there's a simple workaround.

我认为有一个简单的解决方法。

You can ask user the page size and top, bottom, left, right margins. Then render the page in PDF using these settings. PDF will guarantee that the page will be printed as generated.

您可以询问用户页面大小和上、下、左、右页边距。然后使用这些设置以 PDF 格式呈现页面。PDF 将保证页面将按照生成的方式打印。

I think this approach should work well.

我认为这种方法应该很有效。