javascript - 无法使用 wkpdftohtml 将 highcharts 图表加载到 pdf 中

Question

我正在尝试在我通过 C# mvc 应用程序使用 wkhtmltopdf 创建的 pdf 上显示我使用 highcharts.js 创建的图表。但是，对于这个问题似乎没有一个干净的解决方案。有没有人找到一种方法来调整他们的图表以显示在 PDF 上？

到目前为止，我已经通过 StackOverflow、highcharts 文档和 wkhtmltopdf GitHub 页面的 GitHub 页面精心搜索了解决此问题的方法。

解决方案似乎存在一些可能导致这些错误的各种问题。我已经尝试了尽可能多的方法来找到与我当前的问题相匹配的方法，但似乎没有一个能解决问题。它们如下：

1）图表的动画打破了执行javascript的wkpdftohtml，所以什么都没有显示，解决方案是将动画设置为false，我已经完成了。

2）该命令需要启用javascript并通过命令行设置延迟“--enable-javascript --debug-javascript --javascript-delay”

3) 包括我使用在线托管的 https/http 链接完成的脚本/css 的绝对类路径，甚至在开发服务器上发布代码以确保它不是离线问题，使用头标签中的以下脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

4) 我已经尝试并成功地在我的 razorview 中创建了一个单独的 javascript 文件和/或一个本地脚本，我知道它在开始时作为语句执行。

5) 我还创建了父 div 和一个内部画布标签，其中我使用以下设置的宽度/高度呈现图表：

<div height="500" width="500">
    <canvas id="myChart" height="500" width="500"></canvas>
</div>

6）我也知道代码成功地在我的应用程序的视图中制作了图形，所以这不是图形根本不呈现的问题，只有当我尝试在 pdf 上呈现它时它才不显示.

7) 我还会注意到，pdf 正在呈现在横向的 PDF 的第二页上。但是，如果我将其他元素添加到页面，它们会显示在第二页上。

8）我正在使用“Highsoft Highchart”版本 7.0.3.7 和 Nreco.PdfGenerator 版本 1.1.15，我尝试过以前的版本，其他人说他们曾经/曾经工作过，但没有一个创建结果

这是我在视图中创建图表的代码。

<script type="text/javascript">
        $(function () {

            //this line just makes another element green so I know the javascript is working appropriately. Removing it does not affect anything.
            document.getElementById("here").style.color = "green";

            $('#myChart').highcharts({
                chart: {
                    renderTo: 'myChart',
                    type: 'line',
                    spacing: [0, 0, 0, 0],
                    height: 300,
                    width: 300,
                    backgroundColor: 'orange'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    gridLineDashStyle: 'LongDash',
                    gridLineColor: 'black',
                    lineColor: 'black',
                    lineWidth: 1,
                    title: null,
                    max: 120,
                    labels: {
                        style: {
                            color: 'black'
                        }
                    }
                },
                exporting: {
                    chartOptions: {
                        chart: {
                            width: 1400,
                            height: 1200
                        }
                    }
                },
                plotOptions: {
                    series: [{
                        // general options for all series,
                        animation: false
                    }],
                    line: {
                        // shared options for all line series
                    }
                },
                series: [{
                    // specific options for this series instance
                    type: 'line'
                }]
            });
        });
    </script>


Here is the C# code from the model where I create the method that is passed to the controller to create the pdf

<pre><code>
 public byte[] GeneratePDF(string view, object model, Controller controller, PageOrientation pageOrientation, int[] pageMargins)
        {
            if (pageMargins.Length != 4)
                throw new Exception("Page margins must have 4 numeric values with top, bottom, left, right");

            // convert the view to Html string
            string htmlContent = ViewRenderer.RenderView(view, model, controller.ControllerContext);
            HtmlToPdfConverter htmlToPdf = new HtmlToPdfConverter();
            htmlToPdf.Orientation = pageOrientation;

            htmlToPdf.Margins = new PageMargins
            {
                Top = pageMargins[0],
                Bottom = pageMargins[1],
                Left = pageMargins[2],
                Right = pageMargins[3]
            };

            htmlToPdf.CustomWkHtmlArgs = " --enable-javascript --debug-javascript --javascript-delay 1000 ";

            // get bytes from generating pdf
            byte[] pdfBytes = htmlToPdf.GeneratePdf(htmlContent);
            return pdfBytes;
        }
</code></pre>

我正在寻找一种在 PDF 中生成此图表的方法。任何帮助将不胜感激，因为这让我发疯。

标签： javascriptmodel-view-controllerhighchartswkhtmltopdf