为什么生成的 PDF 中使用的像素比源 html 中使用的更多？

Question

我使用此代码在 css 文件中下载带有图像的网页，但它在 pdf 文件中缩放得太大了。图片的宽度为 120 像素，显示为 185 像素宽度。对于 Camparison，我构建了一条 10 像素线，显示为 12 像素。但为什么？我该如何解决？我无法在没有更多详细信息的情况下发布问题，但我什么都不知道，这对您来说很有用，但也许有帮助：我在存档部门工作，负责存档可在其网页中访问的信息，但最终，外观并不是创作者想要的样子。我尝试改用本地 CSS 文件，但意识到这不是我想要的。我必须更频繁地使用我的工作流程并且必须使用他们提供的 css 文件并将 html 页面正确转换为 PDF。在此先感谢您的阅读，我试图让准则包含所有重要的知识，但仅此而已。该项目的依赖项是：com.itextpdf 内核 7.1.7com.itextpdf styled-xml-parser 7.1.7com.itextpdf svg 7.1.7com.itextpdf pdf 7.1.7org.slf4j-简单 1.6.1package ueberordnungen;import java.io.IOException; import org.jsoup.Jsoup;import org.jsoup.nodes.Document;import org.jsoup.nodes.Element;import com.itextpdf.html2pdf.ConverterProperties;import com.itextpdf.html2pdf.HtmlConverter;import com.itextpdf.kernel.pdf.PdfDocument;import com.itextpdf.kernel.pdf.PdfWriter;public class Worker3 {    public static void main(String[] args) throws IOException {         //eine spezielle URL heraus picken        String kongressURL = "https://www.egms.de/dynamic/de/meetings/vnda2019/index.htm";        Document doc = Jsoup.connect(kongressURL).get();        System.out.println("-----Titel: "+ doc.title());        Element content = doc.child(0);        content.getElementById("navigation_language").remove();        content.getElementById("navigation").remove();        content.getElementsByAttributeValue("href", "/static/css/gms-framework.css").first().remove();        content.getElementsByClass("hidden_navigation").first().remove();        content.getElementById("page").before(content.getElementById("header"));        content.getElementsByTag("script").remove();        content.getElementById("owner_links_container").attr("style", "border-top:10px solid #060");        ConverterProperties properties = new ConverterProperties();        properties.setBaseUri(kongressURL);        PdfWriter writer = new PdfWriter("content.pdf");        HtmlConverter.convertToPdf(content.html(), new PdfDocument(writer), properties);    } }

Answer 1

iText 7 以每点一个图像像素的比例添加背景图像，请参阅AbstractRenderer.drawBackground：

PdfXObject backgroundXObject = backgroundImage.getImage();

...

Rectangle imageRectangle = new Rectangle(backgroundArea.getX(), backgroundArea.getTop() - backgroundXObject.getHeight(),

        backgroundXObject.getWidth(), backgroundXObject.getHeight());

...

drawContext.getCanvas().addXObject(backgroundXObject, imageRectangle);

正如您在代码中看到的，图像的宽度和高度值（包含位图图像的水平和垂直像素数）原样用作图像最终缩放到的矩形的宽度和高度。由于画布绘图操作中使用的单位是默认为1 / 72英寸的用户空间单位，因此图像以每英寸 72 个图像像素或每磅 1 个图像像素显示。

默认情况下，Web 浏览器通常以每像素 1 个图像像素或每英寸 96 个图像像素显示图像。

您的示例网页主要使用 px = 1 / 96 in 中给出的绝对位置进行布局。因此，网络浏览器或 iText 绘制图像的不同比例会导致不同的外观，尤其是外观不佳在手头的案例中的 iText 中：

imageRectangle您可以通过替换上面计算的中心代码行，使 iText 绘制背景图像更像浏览器

Rectangle imageRectangle = new Rectangle(backgroundArea.getX(), backgroundArea.getTop() - backgroundXObject.getHeight(),

        backgroundXObject.getWidth() * .75f, backgroundXObject.getHeight() * .75f);

在 iText 中，按照上面的建议进行了修补：

实际上，此代码位置似乎是开始添加background-size当前此处不支持的支持的合适位置。

当心：我对 iText 7 HTML 到 PDF 的转换代码不是很深入，所以我无法确定这个补丁是否有不良副作用。

这是一个错误吗？

严格来说它不是，至少就我浏览 CSS 规范而言：

HTML 页面未background-size在此处设置。因此，应使用背景图像的固有尺寸。不幸的是，CSS 并没有定义通常如何找到内在维度。因此，网页基本上将背景图像的比例留给了 HTML 客户端的心血来潮......

但是，如果 iText 7 HTML to PDF 旨在生成与浏览器输出一致的结果，那么它最好在此处更改其默认比例以匹配那些浏览器的比例。

---

我刚刚意识到AbstractRenderer我修补的不在 html2pdf 项目中，而是在核心 iText 7 布局项目中。

因此，在这里更改大小可能不是一个好主意，至少如果一个人不仅将 iText 7 用于 html2pdf，而且还直接将其使用。

尽管如此，该代码位置适合引入对某些背景大小属性的支持。html2pdf 然后可以扩展BackgroundApplierUtil以便它始终将新的核心属性设置为适合创建与浏览器显示内容一致的外观的值。