django - wkhtmltopdf 只呈现浮图的轴？-6ren

django - wkhtmltopdf 只呈现浮图的轴？

转载作者：行者123 更新时间：2023-12-04 04:54:56

我正在尝试获取由 flot 创建的图表并使用 wkhtmltopdf 将其呈现为 PDF。

为此，我获取包含图表的 div 中的 HTML 并将其传递回服务器。

我发现在 PDF 中我只显示了轴而不是实际图表。

在浏览器中看到时，图表如下所示:

enter image description here

但是当 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 喷回服务器还不够好，因为“写”了大部分图表的 Canvas 然后丢失了。

相反，我这样做了:

//fplotChart is the value returned by calling 
//the fPlot .plot() function
var fplotChartCanvas = fplotChart.getCanvas();
valueToSubmitToServer = fplotChartCanvas.toDataURL();

一旦该值返回到服务器上，我就使用“valueToSubmitToServer”作为 IMG 元素中的“src”

<img id="chart1" src="{{ pdf_inject_canvas_url }}">

这工作得很好，只是原始的背景颜色丢失了 - 就我的目的而言，这很好，因为无论如何我都不想要它。

最佳答案

Flot 使用 canvas元素来呈现图形本身，并定位 html div 以显示标签。我猜您使用的 wkhtmltopdf 版本不支持 canvas元素。我已经使用 wkhtmltopdf 0.10.0 rc2 的静态链接版本成功地将浮图捕获到 pdf 中，所以这绝对是可能的。您必须找到适合您平台的版本。

关于django - wkhtmltopdf 只呈现浮图的轴？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16883153/