javascript - 使用 ABCpdf 渲染 pdf 时显示 google 图表

标签 javascript c# html abcpdf

我需要您的帮助来在使用 ABCpdf 渲染 pdf 时显示图表。 这是结果,浏览器中的内容和 pdf 中的内容: enter image description here

实际上,由于它在 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>

很高兴获得任何帮助。

最佳答案

该问题仅出现在 Gecko Engine 中。添加 theDoc.HtmlOptions.Engine = EngineType.Gecko; 后问题得到解决

关于javascript - 使用 ABCpdf 渲染 pdf 时显示 google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34807345/

相关文章:

c# - WPF 事件触发器

c# - C# 客户端套接字从 java 服务器套接字接收数据时出错

javascript - 通过覆盖默认相机增强 HTML5 拍照功能

android - 响应式 Bootstrap 问题

javascript - 从 accesskey 中删除 alt

javascript - 监听只有输入/返回键的事件(不是其他的)

javascript - Ace 代码编辑器在单击时消失

c# - 将 Linux 日期时间转换为 Windows 本地日期时间格式

javascript - 无法处理的实体错误(ajax)(laravel 5.2)

Javascript - 字符串到多层数组