使用ABCpdf呈現pdf時顯示Google圖表

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時顯示Google圖表

問題描述

1 個解決方案

解決方案1
2 2016-01-15 09:33:38

使用ABCpdf呈現pdf時顯示Google圖表

問題描述

1 個解決方案

解決方案1 2 2016-01-15 09:33:38

解決方案1
2 2016-01-15 09:33:38