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

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.

如果有人可以指出更直接的方法,那将是非常有帮助的。我甚至不确定这是否属于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

无论用户配置了什么,用于diplaying它的页面大小都将是字母

This how it should look in the browser: 如何显示HTML文档的打印预览

这应该在浏览器中看起来如何:

4 个解决方案

#1

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)

网站提供打印预览(最好是html格式,否则为png或pdf)

User likes and wants to print:
1. From the browser
2. From some image viewing/editing program (png)
3. From Acrobat (pdf)

用户喜欢并想要打印:来自浏览器来自某些图像查看/编辑程序(png)来自Acrobat(pdf)

Every print solution has it's own Print... dialog. You can change print settings here.

每个打印解决方案都有自己的Print ...对话框。您可以在此处更改打印设置。

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)...

这是你想要的一切都失败的最后一点......你不再能够控制输出(从你的网站)...

#2

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".

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

#3

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转换为latex或类似的东西,并将其呈现为服务器端的pdf或png并显示它。但这将排除使用非常复杂的html布局,否则会变得非常讨厌。

#4

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.

我认为这种方法应该运作良好。

#1