我正在尝试获取由 flot 创建的图表并使用 wkhtmltopdf 将其呈现为 PDF。
为此，我在包含图表的 div 中抓取 HTML 并将其传递回服务器。
我发现在 PDF 中我只显示轴而不是实际图表。
在浏览器中查看时，图表如下所示：
但是同样的图像在 wkhtmltopdf 渲染时看起来像这样：
我在两个模板中都包含了 flot/examples/examples.css。
传递给 wkhtmltopdf 的 HTML 如下所示：
<body>
<h2>Incidents per 100 Workers</h2>
<p>This is the test output</p>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder">
<canvas height="450" width="850" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 850px; height: 450px;" class="flot-base"></canvas><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);" class="flot-text"><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-x-axis flot-x1-axis xAxis x1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 23px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 144px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 265px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 386px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 507px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 624px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 745px; text-align: center;">12</div></div><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-y-axis flot-y1-axis yAxis y1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; top: 418px; left: 2px; text-align: right;">-1.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 348px; left: 2px; text-align: right;">-1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 279px; left: 2px; text-align: right;">-0.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 209px; left: 6px; text-align: right;">0.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 140px; left: 6px; text-align: right;">0.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 70px; left: 6px; text-align: right;">1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 6px; text-align: right;">1.5</div></div></div><canvas height="450" width="850" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 850px; height: 450px;" class="flot-overlay"></canvas>
</div>
</div>
</div>
</body>
</html>
任何人有任何想法可能导致这种情况？
谢谢
回答 ！
正如下面 Ryley 所提到的，将 HTML 喷射回服务器还不够好，因为大部分图表被“写入”的画布随后会丢失。
相反，我这样做了：
//fplotChart is the value returned by calling
//the fPlot .plot() function
var fplotChartCanvas = fplotChart.getCanvas();
valueToSubmitToServer = fplotChartCanvas.toDataURL();
一旦值回到服务器上，我就在 IMG 元素中使用“valueToSubmitToServer”作为“src”
<img id="chart1" src="{{ pdf_inject_canvas_url }}">
这工作得很好，只是原始的背景颜色丢失了——就我的目的而言，这很好，因为我无论如何都不想要它。