如何用pdfkit实现图片横向排列并解决重复显示异常问题

pdfkit基于HTML/CSS渲染PDF，要实现每行3张图片的自动排列，需通过正确的CSS布局和循环渲染解决你的两个问题：

核心实现代码（Python示例） #

import pdfkit

# 替换为你的实际图片路径列表
image_paths = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg", "img6.jpg"]

# 构建带CSS布局的HTML
html = """
<!DOCTYPE html>
<html>
<head>
    <style>
        .img-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px; /* 图片间间距 */
            padding: 15px;
        }
        .img-item {
            width: calc(33.333% - 8px); /* 减去gap的占比，确保每行3张 */
            box-sizing: border-box;
        }
        .img-item img {
            width: 100%;
            height: auto; /* 保持图片比例 */
        }
    </style>
</head>
<body>
    <div class="img-grid">
"""

# 循环生成所有图片元素
for img_path in image_paths:
    html += f'        <div class="img-item"><img src="{img_path}"></div>\n'

html += """
    </div>
</body>
</html>
"""

# 生成PDF，若需访问本地文件可加enable-local-file-access选项
pdfkit.from_string(html, "output.pdf", options={"enable-local-file-access": ""})

问题针对性说明 #

1. 图片无法横向排列：
   旧的align属性无法实现灵活的网格布局，改用CSS Flexbox：通过display: flex让容器内元素横向排列，flex-wrap: wrap实现空间不足时自动换行，再给每个图片容器设置1/3宽度（减去间距占比），就能稳定实现每行3张。

2. 多张图片仅显示一次：
   问题根源是未正确循环渲染图片元素。通过遍历图片路径列表，动态生成每个<div class="img-item"><img>节点，确保所有图片路径都被渲染到HTML中，pdfkit就能解析并显示所有图片。

额外注意事项 #

• 图片路径尽量用绝对路径，避免pdfkit无法定位文件；
• 若图片尺寸差异大，可给.img-item添加固定高度并设置object-fit: cover保持显示效果；
• Node.js等其他语言版本的pdfkit，布局逻辑完全一致，只需调整循环生成HTML的语法。

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