pdfkit无法生成2×2图片网格PDF？求解决方案

我制作了一个显示2×2图片网格的HTML文件，但使用pdfkit（依赖wkhtmltopdf）转换为PDF时，无法得到和浏览器一致的效果。以下是原代码：

原HTML代码 #

<html>
    <link rel="stylesheet" type="text/css" href="test_style.css"/>
  <body>
<div class="container">
  <div class="image">
    <img src="IL_fig1.png" />
  </div>
  <div class="image">
    <img src="IL_fig2.png" />
  </div>
  <div class="image">
    <img src="IL_fig3.png" />
  </div>
  <div class="image">
    <img src="IL_fig4.png" />
  </div>
</div>
  </body>
</html>

原CSS代码 #

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.container .image {
  width: 40%;
}

.container img {
  width: 100%;
  margin: 20px;
}

原Python代码 #

options = {
    'enable-local-file-access': None,
    'dpi': 300,
    'print_media_type': True}
config = pdfkit.configuration(wkhtmltopdf=path_wkhtmltopdf)
pdfkit.from_file(path_html,path_pdf, configuration=config,options=options)

问题原因 #

wkhtmltopdf的渲染引擎对flex布局的支持存在局限性，启用print_media_type后部分CSS属性表现与屏幕模式不同，同时原CSS中margin的设置方式会导致图片容器宽度计算异常，最终破坏2×2网格布局。

解决方案 #

方案1：优化Flex布局兼容性

调整CSS，使用calc()精确计算容器宽度，添加box-sizing确保布局稳定，同时针对打印媒体统一样式：

修改后的内嵌CSS的HTML（避免外部CSS路径问题）：

<html>
<head>
  <style type="text/css">
    @media screen, print {
      .container {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        /* 添加wkhtmltopdf兼容的flex前缀 */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
      }

      .container .image {
        width: calc(50% - 40px); /* 减去左右margin总和 */
        margin: 20px;
        box-sizing: border-box; /* 防止margin/padding撑大容器 */
      }

      .container img {
        width: 100%;
        height: auto; /* 保持图片比例 */
        display: block; /* 移除图片默认行内间距 */
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="image">
    <img src="IL_fig1.png" />
  </div>
  <div class="image">
    <img src="IL_fig2.png" />
  </div>
  <div class="image">
    <img src="IL_fig3.png" />
  </div>
  <div class="image">
    <img src="IL_fig4.png" />
  </div>
</div>
</body>
</html>

方案2：改用更稳定的Float布局

如果flex布局仍有问题，可以换用wkhtmltopdf更好支持的float布局：

@media screen, print {
  .container {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden; /* 清除浮动 */
  }

  .container .image {
    width: calc(50% - 40px);
    margin: 20px;
    float: left;
    box-sizing: border-box;
  }

  .container img {
    width: 100%;
    height: auto;
    display: block;
  }
}

调整Python转换选项

尝试关闭print_media_type（使用屏幕样式渲染），并设置页面边距为0避免布局挤压：

options = {
    'enable-local-file-access': None,
    'dpi': 300,
    # 注释掉print_media_type，使用屏幕样式
    # 'print_media_type': True,
    'margin-top': '0',
    'margin-right': '0',
    'margin-bottom': '0',
    'margin-left': '0'
}
config = pdfkit.configuration(wkhtmltopdf=path_wkhtmltopdf)
pdfkit.from_file(path_html, path_pdf, configuration=config, options=options)

内容的提问来源于stack exchange，提问作者Spedtsberg