Question

我需要你的帮助才能在使用ABCpdf渲染pdf时显示图表。这是一个结果，浏览器中的内容以及pdf上的内容：

实际上因为它在html上看起来不错，我认为问题在于渲染pdf。这是我用来创建pdf的代码：

var theDoc = new Doc();     
theDoc.HtmlOptions.Timeout = 10000;
theDoc.HtmlOptions.UseScript = true;
theDoc.HtmlOptions.PageCacheEnabled = false;
theDoc.HtmlOptions.OnLoadScript = "(function(){ " +
                                    "window.ABCpdf_go = false; " +
                                    "onLoad(); " +
                                    "window.ABCpdf_go = true; })();";
theDoc.AddImageUrl("file:///E:/development/temp/test(1).html");
theDoc.Save(string.Format("output-{0}.pdf", DateTime.Now.Ticks));
theDoc.Clear();

这是我的html页面：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
        var options = {
            'title': 'How Much Pizza I Ate Last Night',
            'width': 400,
            'height': 300
        };
        var chart = new google.visualization.PieChart(document.getElementById('chart-div'));
        google.visualization.events.addListener(chart, 'ready', function () { onChartRenderReady(chart);});
        chart.draw(data, options);
    }
    function addText(text) {
        var h = document.createElement('h1');
        var t = document.createTextNode(text);
        h.appendChild(t);
        document.body.appendChild(h);
    }
    function onDOMContentLoaded() {
        addText('From onDOMContentLoaded event');
        drawChart();
    }
    function onLoad() {
        addText('From onLoad event');
        drawChart();
        addText('Finished drawing chart');
    }
    function onChartRenderReady(chart) {
        addText('From onChartRenderReady event');
        var imageDiv = document.getElementById('chart-image');
        imageDiv.innerHTML = '<img src="' + chart.getImageURI() + '">';
        addText('Added image');
       // ABCpdf_RenderComplete();
    }
    function test() {
        addText('test');
    }
    function ABCpdf_RenderWait_Dummy() {
        addText('ABCpdf_RenderWait_Dummy');
    }
    function ABCpdf_RenderComplete_Dummy() {
        addText('ABCpdf_RenderComplete_Dummy');
    }
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    document.addEventListener("DOMContentLoaded", onDOMContentLoaded);
    window.onload = onLoad;
</script>
<style>
#chart {
  height: 300px;
  width: 400px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="chart-image"></div>
<form id="chart">
    <div id="chart-div"></div>
</form>
<h3>Static text (should be always present)</h3>
</body>
</html>

很高兴得到任何帮助。

Answer 1

问题仅出在Gecko Engine上。添加theDoc.HtmlOptions.Engine = EngineType.Gecko;后，问题就解决了

使用ABCpdf呈现pdf时显示谷歌图表

1 个答案: