Может ли pdfmake генерировать смешанные старшие графики (SVG) и другой контент html? - PullRequest
Новая
       35

Может ли pdfmake генерировать смешанные старшие графики (SVG) и другой контент html?

0 голосов
/ 19 февраля 2020

Я хочу использовать pdfmake для загрузки всей страницы html в PDF. Тем не менее, моя страница смешана с высокими диаграммами, простым текстом, html и изображениями. Когда я пытаюсь экспортировать свою страницу, все старшие части отсутствуют (остальные в порядке). Не уверен, что pdfmake - лучший способ справиться с этим или нет. Кто-нибудь может помочь с этим?

Спасибо enter image description here enter image description here

Я воспроизвел ошибку, пожалуйста, посмотрите 

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);
.container {
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
}

#buttonrow {
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
}

.highcharts-axis-line {
  stroke-width: 0;
}
<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>

<body>
  <div ng-controller="listController" id="exportthis">
    <div id="container" style="width:50%;float:left;">
      <p class="highcharts-description">
      </p>
    </div>
    <div>
      <table class="editorDemoTable" style="color: #000000; font-size: 14px; width: 536px;">
        <thead>
<tr>
<td style="width: 192px;">Name of the feature</td>
<td style="width: 181px;">Example</td>
<td style="width: 145px;">Default</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
</tbody>
</table>
    </div>

    <button ng-click="export()">export</button>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 21 февраля 2020

Полагаю, вы пытаетесь добавить свою диаграмму в PDF без изменений. Проблема в том, что он canvas и он плохо отображается в .pdf файлах.

Я уже сталкивался с такой ситуацией, и я советую вам сначала создать поддерживаемую image версию вашей диаграммы.

В зависимости от того, что вы хотите, вы можете экспортировать JPG, PNG или даже SVG изображение вашего графика. Чтобы не сделать файл pdf слишком большим и чтобы пиксели не увеличивались при его увеличении, я выбрал экспорт SVG.

Вот документация и пример о том, как получить SVG экспорт вашего графика.

Идем дальше: Поскольку данные, из которых состояла диаграмма, были разумными, мне нужно было настроить собственный сервер экспорта , Надеемся, что Highcharts предоставляют хорошо документированный (и официальный) способ настроить ваш собственный сервер экспорта с поддержкой различных ОС .

...