如何在打印html元素時獲得正確的渲染大小
[英]How to get correct rendering size when printing html elements
問題描述
在將它們打印到A4尺寸紙張時，我無法理解如何渲染具有正確尺寸的html元素。
為了說明我的目的，我將我的代碼簡化為一個html頁面，其中一個紅色邊框表應為210mmx297mm（A4紙張尺寸）：
<!DOCTYPE html> <html> <head> <style> @page { size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */ } html, body { width: 210mm; padding:0; margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */ } html { background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */ } table { width:100%; height:297mm; -moz-box-sizing: border-box; border: solid 3px red; border-spacing:0; border-collapse: collapse; } td { padding: 0; text-align: center; box-shadow: inset 0 0 0 1000px white; } </style> </head> <body> <table><tr><td>Hello world!</td></tr></table> </body> </html>
- 當我嘗試使用Firefox（49.0.2）打印它， 並小心地將所有邊距設置為0並將渲染大小設置為100％時，我得到一個顯然超大的表：
- 如果我選擇“適應頁面”來渲染大小，我會得到一張顯然縮小尺寸的表格：
- 如果我嘗試使用Chrome（54.0.2840.87米），我會更幸運
我試圖在css中一直強制尺寸為210mmx297mm，但仍然有問題。 我無法弄清楚它是什么......無論是渲染引擎中的錯誤還是我的代碼中缺少設置。
注意
在上下文中，我正在嘗試使用html + css + javascript創建自動報告，以便可以輕松查看這些報告，並最終從Web瀏覽器打印到pdf或紙張。 封面應在A4紙的邊緣填充一些圖像。
這是一些更完整的例子：
我幾乎就在那里，一切都在屏幕上很好地顯示（firefox + chrome）但是在打印時仍然有這些邊距（ 打印工作只使用firefox + nomargin + adaptsize ...在打印時重復打印頁眉/頁腳時會出現問題）。
3 個解決方案
解決方案1
7 2016-11-13 05:45:32
你正在解決一個困難的問題，這是許多程序員存在的禍根。 從HTML打印並確保與不同瀏覽器的兼容性基本上是獨角獸。 你不應該自己管理這個問題。 CSS樣式的怪癖和瀏覽器生態系統的碎片將確保您不會成功。
我的建議是，您可以查看PDF生成器API，如PDF Kit或iText 。
根據我的研究，頁面和表單打印在Firefox上尤其成問題。 正如您從第一手經驗中注意到的那樣，您無法以理智的方式管理利潤。 我也試過Firefox 49.0.2但沒有成功。
我想過使用@media print{}但是Firefox不願意合作。
話雖這么說，你的代碼工作得很好，我在你提到的版本上運行Chrome。 請注意，我將邊距設置為“無”。
解決方案2
4 2016-11-17 02:26:06
封面應在A4紙的邊緣填充一些圖像。
你永遠不會滿足這個要求。 相信我，我已經在網上做了很長一段時間的儀表板和報告，而你根本就沒有像這樣對渲染進行細粒度的控制。 網絡不是為它而設計的。
如果你願意在一個邊緣內工作而不是嘗試像素完美的布局，你仍然可以生成一些很棒的報告。 Web報告看起來非常清晰，您可以使用一個代碼庫覆蓋多個媒體。
但是對於像素完美渲染很重要的情況，除了控制分頁符等之外，只有PDF庫就足夠了。 那里有一些好的 - 我在PDFSharp上取得了成功。
為什么不顯示不覆蓋整個頁面的封面圖像？
解決方案3
0 2016-11-19 03:39:25
您可以使用phantomjs來渲染您的pdf（最終要求pdf）。 在php中我已成功使用https://github.com/kriansa/h2p生成pdf文件。 （還有使用d3.js渲染基於javascript的圖表）。 這不容易，但無頭瀏覽你可以使它工作。
表單未呈現 html 元素，僅將表單字段 object 打印為文本
[英]Form not rendering html elements and just printing the form field object as text
將HTML頁面打印為PDF時，如何使圖像以正確的比例顯示？
[英]How can I make images show up in the correct scale when printing an HTML page as PDF?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.