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

Question

我使用此代码来下载带有 css 文件中的图像的网页，但它在 pdf 文件中缩放得太大。图片宽度为 120 像素，显示宽度为 185 像素。对于比较，我构建了一条 10 像素线，以 12 像素显示。

但是为什么呢？我该如何解决这个问题？

如果没有更多详细信息，我无法发布问题，但我什么都不知道，这对您有用，但也许有帮助:

我在文件部门工作，负责归档可在其网页中访问的信息，但最终，外观并不是创建者想要的样子。我尝试使用本地 CSS 文件，但意识到这不是我想要的。我必须更频繁地使用我的工作流程，并且必须采用他们提供的 css 文件，然后将 html 页面正确转换为 PDF。

预先感谢您的阅读，我试图让代码包含所有需要了解的重要内容，但仅此而已。

该项目的依赖项是:

• com.itextpdf 内核 7.1.7
• com.itextpdf styled-xml-parser 7.1.7
• com.itextpdf svg 7.1.7
• com.itextpdf pdfa 7.1.7
• org.slf4j-simple 1.6.1

package 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 以每 pt 一个图像像素的比例添加背景图像，请参阅 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);

正如您在代码中看到的，图像的宽度和高度值(包含位图图像的水平和垂直像素数)按原样用作矩形的宽度和高度，图像最终被缩放。由于 Canvas 绘制操作中使用的单位是用户空间单位，默认为 ¹/₇₂in，因此图像以每英寸 72 个图像像素或每 pt 1 个图像像素显示.

网络浏览器通常默认以每像素 1 个图像像素或每英寸 96 个图像像素显示图像。

您的示例网页主要是使用 px = ¹/₉₆in 给出的绝对位置进行布局的。因此，网络浏览器或 iText 绘制图像的不同比例会导致不同的外观，特别是在当前情况下，iText 中的外观并不令人满意:

• 在 Chrome 中:

  

• 在 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，以便它始终将新的核心属性设置为适合创建与浏览器显示内容一致的外观的值。