时间戳

首页 > 解决方案 > 使用 Itext 的 pdfHTML 将 html 转换为 pdf 时，字体粗细 css 不起作用

java - 使用 Itext 的 pdfHTML 将 html 转换为 pdf 时，字体粗细 css 不起作用

问题描述

这就是我将 HTML 转换为 pdf 的方式：-

  File pdfDest = new File("output");

  ConverterProperties converterProperties = new ConverterProperties();

  HtmlConverter.convertToPdf(html, new FileOutputStream(pdfDest), converterProperties);

以下是重现该问题的示例 HTML：-

<html>

  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;500;600;700" rel="stylesheet">

    <style>
     body {
       font-family: 'IBM Plex Sans', sans-serif;
       color: #444444;
      }


      .pt-16 {
        padding-top: 16px;
      }

      .pb-16 {
        padding-bottom: 16px;
      }


      .pr-4{
        padding-right: 4px;
      }


      .f-18 {
        font-size: 18px;
      }

 
      .font-weight-medium {
        font-weight: 400;
      }

      .font-weight-semibold {
        font-weight: bold;
      }

      .font-weight-bold {
        font-weight: bold;
      }


      .data {
        display: inline-block;
        padding-left: 14px;
        padding-top: 5px;
      }


    </style>
  </head>

  <body>

          <div class="pt-16">
            <div class="f-18 font-weight-semibold">4. Time Periods</div>
              <div class="pb-16">
                <div class="data">
                  <span class="pr-4">Some data -</span>
                  <span class="font-weight-medium">Lorem,</span>
                  <span class="font-weight-medium">Gypsum,</span>
                </div>
              </div>
          </div>
         
    
  </body>

</html>

在浏览器中看到的内容：-

在此处输入图像描述

pdf中的内容：-

在此处输入图像描述

显然，用于使文本半粗体/粗体的 CSS 不起作用，如何解决这个问题？字体似乎是正确的，看起来问题只在 CSS

在此处输入图像描述

标签： javahtmlpdf-generationitext7pdfhtml

解决方案

如果您检查 url 的内容https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;500;600;700，您会发现它不包含@font-face500、600 和 700 字体粗细的 at 规则。

显然，该wght@参数是特定于 google css v2 api ( https://fonts.googleapis.com/css2) 的，在之前版本的 api ( https://fonts.googleapis.com/css) 中被忽略了。

因此，您必须将您的网址替换为：

  • https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700
  • 或者https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700

这是我的测试程序（它输出具有预期格式的pdf，这里是结果）：

import com.itextpdf.html2pdf.ConverterProperties;
import com.itextpdf.html2pdf.HtmlConverter;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;

public class Main {
    public static void main(String[] args) throws FileNotFoundException {
    File pdfDest = new File("/tmp/output.pdf");

    ConverterProperties converterProperties = new ConverterProperties();

    HtmlConverter.convertToPdf(getHtml(), new FileOutputStream(pdfDest), converterProperties);
    }

    public static String getHtml(){
    return "<html>\n" +
            "\n" +
            "  <head>\n" +
            "    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n" +
            "    <link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700\" rel=\"stylesheet\">\n" +
            "\n" +
            "    <style>\n" +
            "     body {\n" +
            "       font-family: 'IBM Plex Sans', sans-serif;\n" +
            "       color: #444444;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .pt-16 {\n" +
            "        padding-top: 16px;\n" +
            "      }\n" +
            "\n" +
            "      .pb-16 {\n" +
            "        padding-bottom: 16px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .pr-4{\n" +
            "        padding-right: 4px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .f-18 {\n" +
            "        font-size: 18px;\n" +
            "      }\n" +
            "\n" +
            " \n" +
            "      .font-weight-medium {\n" +
            "        font-weight: 400;\n" +
            "      }\n" +
            "\n" +
            "      .font-weight-semibold {\n" +
            "        font-weight: bold;\n" +
            "      }\n" +
            "\n" +
            "      .font-weight-bold {\n" +
            "        font-weight: bold;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .data {\n" +
            "        display: inline-block;\n" +
            "        padding-left: 14px;\n" +
            "        padding-top: 5px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "    </style>\n" +
            "  </head>\n" +
            "\n" +
            "  <body>\n" +
            "\n" +
            "          <div class=\"pt-16\">\n" +
            "            <div class=\"f-18 font-weight-semibold\">4. Time Periods</div>\n" +
            "              <div class=\"pb-16\">\n" +
            "                <div class=\"data\">\n" +
            "                  <span class=\"pr-4\">Some data -</span>\n" +
            "                  <span class=\"font-weight-medium\">Lorem,</span>\n" +
            "                  <span class=\"font-weight-medium\">Gypsum,</span>\n" +
            "                </div>\n" +
            "              </div>\n" +
            "          </div>\n" +
            "         \n" +
            "    \n" +
            "  </body>\n" +
            "\n" +
            "</html>\n";
    }
}

maven依赖：

<dependencies>
    <dependency>
        <groupId>com.itextpdf</groupId>
        <artifactId>html2pdf</artifactId>
        <version>3.0.5</version>
    </dependency>
</dependencies>

推荐阅读