Невозможно получить диаграмму старших графиков для загрузки в формате PDF с помощью wkpdftohtml - PullRequest
Новая
       19

Невозможно получить диаграмму старших графиков для загрузки в формате PDF с помощью wkpdftohtml

0 голосов
/ 29 марта 2019

Я пытаюсь отобразить диаграмму, созданную мной с помощью highcharts.js, в PDF-файле, который я создаю с помощью wkhtmltopdf через приложение C # mvc.Однако, кажется, нет чистого решения этой проблемы.Кто-нибудь нашел способ адаптировать свою диаграмму, чтобы показать в PDF?

До сих пор я тщательно искал решения этой проблемы через StackOverflow, документацию по старшим диаграммам и страницу GitHub для страницы GitHub wkhtmltopdf.

Кажется, есть несколько проблем с решениями, которые могут вызвать эти ошибки.Я перепробовал столько, сколько смог найти, что соответствует моей нынешней проблеме, но ни одна из них не справилась.Они выглядят следующим образом:

1) Анимация графика прерывает wkpdftohtml при выполнении javascript, поэтому ничего не отображается, и решение состоит в том, чтобы установить для анимации значение false, которое я сделал.

2)команда требует включения javascript и установки задержки через командную строку с помощью «--enable-javascript --debug-javascript --javascript-delay»

3) Включение абсолютных путей классов к scripts / css, которые я сделалиспользуя ссылки https / http, размещенные в Интернете, даже публикуя код на сервере разработки, чтобы убедиться, что это не проблема в автономном режиме, используя следующие сценарии в тегах head: 

<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) Я пробовал иуспешно создать отдельный файл javascript и / или локальный скрипт в моем razorview, который, как я знаю, выполняется как оператор в начале работ.

5) Я также создал родительский div и внутренний тег canvas вгде я отображаю диаграмму с заданными значениями ширины / высоты следующим образом: 

<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;
        }

Я ищу способ создания этой диаграммы в PDF.Любая помощь будет принята с благодарностью, так как это сводит меня с ума.

...