渲染图像比 html 元素宽得多

Question

我正在尝试使用 npm wkhtmltox 将此页面呈现为 png：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html, body {
        padding: 0;
        width: 340px;
      }
      html, body, dl {
        margin: 0;
        font-size: 11px;
        font-family: Verdana, Arial;
        background-color: #fff;
      }
      dl {
        padding: 5px;
        width: 330px;
      }
      dt {
        float: left;
        clear: left;
        width: 80px;
        text-align: right;
        color: #1d439b;
      }
      dd {
        width: 240px;
        margin: 0 0 0 90px;
        padding-bottom: 0.5em;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>eargasm</dt><dd>Audio (music/effects/foley) is outstanding.</dd>
      <dt>中文</dt><dd>My favourite language (mandarin chinese).</dd>
      <dt>eyegasm</dt><dd>Mind-blowingly stunning visuals.</dd>
    </dl>
  </body>
</html>

我只是正常渲染：

converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);

我得到这样一张图片：

宽度为 1024 像素。

我期待 340 像素宽的图像。

Answer 1

默认为"screen width"（1024像素）。您可以像这样设置 width 选项...

converter.image(fs.createReadStream('tagslegend.html'), { format: "png", width: "340" }).pipe(response);

您可以在命令行运行 wkhtmltoimage --help 获得更多选项。

命令行参数映射到选项名称，但使用驼峰式大小写代替连字符...例如命令行参数 --foo-bar 123 变为选项 fooBar: '123'

渲染图像比 html 元素宽得多

rendered image is much wider than html element

html

javascript

node.js

wkhtmltoimage