2016-01-15 41 views
0

我需要您的帮助来显示图表,同时使用ABCpdf呈现PDF。 这里是一个结果,什么是浏览器,什么是对PDF: enter image description here使用ABCpdf显示谷歌图表,同时呈现PDF使用ABCpdf

事实上,因为它看起来对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> 

会很高兴的任何帮助。

回答

2

这个问题只在Gecko引擎。加入theDoc.HtmlOptions.Engine = EngineType.Gecko;后问题解决了