exporting - Exportar Highcharts a PDF(usando javascript y servidor local-sin conexión a internet)
highcharts pdf export (5)
Estoy usando Highcharts en mi aplicación (sin conexión a Internet)
Tengo múltiples gráficos en una página html, y quiero generar un informe en PDF que contenga todos los gráficos de esta página.
¿Cómo puedo hacer esto sin enviar los datos a ningún servidor en Internet?
Estaré agradecido por cualquier ayuda o cualquier ejemplo que pueda proporcionar. Gracias de antemano :)
Necesita configurar su propio servidor de exportación, localmente como en el artículo
Sí, esto es posible, pero implica algunas bibliotecas diferentes para trabajar. La primera biblioteca es jsPDF que permite la creación de PDF en el navegador. El segundo es canvg que permite la representación y el análisis de SVG, el bit que es realmente genial, aunque puede renderizar un svg en el elemento canvas. Por último, está el módulo de exportación de Highcharts que nos permitirá enviar el svg al canvg para convertirlo en un URL de datos que luego se le puede dar a jsPDF para que se convierta en su pdf.
Aquí hay un ejemplo http://fiddle.jshell.net/leighking2/dct9tfvn/ . También puede ver allí los archivos fuente que deberá incluir en su proyecto.
Por lo tanto, para iniciar los gráficos altos se proporciona un ejemplo del uso de canvg con su exportación para guardar un gráfico como png. porque quiere todos los iamges en un pdf esto ha sido ligeramente alterado para nuestro propósito simplemente devolver la URL de datos
// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement(''canvas'');
canvas.setAttribute(''width'', width);
canvas.setAttribute(''height'', height);
if (canvas.getContext && canvas.getContext(''2d'')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn''t support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
Luego, para el ejemplo, configuré Exportar con un clic de botón. Esto buscará todos los elementos de una cierta clase (así que elija uno para agregar a todos sus elementos de gráfico) y luego llame a su función highcharts.createCanvas.
$(''#export_all'').click(function () {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 80;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");
//loop through each chart
$(''.myChart'').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imageData, ''JPEG'', 45, (index * chartHeight) + 40, 120, chartHeight);
});
//save with name
doc.save(''demo.pdf'');
});
Es importante tener en cuenta que si tiene muchos gráficos, tendrá que manejarlos colocándolos en una página nueva. La documentación para jsPDF parece muy obsoleta (tienen una buena página de demos, aunque no mucho para explicar todas las opciones posibles), hay una función addPage () y luego puedes jugar con anchos y alturas hasta que encuentres algo que trabajos.
la última parte es simplemente configurar los gráficos con una opción adicional para no mostrar el botón exportar en cada gráfico que normalmente se mostraría.
//charts
$(''#chart1'').highcharts({
navigation: {
buttonOptions: {
enabled: false
}
},
//this is just normal highcharts setup form here for two graphs see fiddle for full details
El resultado no es tan malo que estoy impresionado con la calidad de los gráficos, ya que no esperaba mucho de esto, con algunos juegos de las posiciones en pdf y los tamaños podrían verse muy bien.
Aquí hay una captura de pantalla que muestra las solicitudes de red realizadas antes y después de la exportación, cuando se realiza la exportación no se realizan solicitudes http://i.imgur.com/ppML6Gk.jpg
aquí hay un ejemplo de cómo se ve el pdf http://i.imgur.com/6fQxLZf.png (se ve mejor cuando se ve como el pdf real)
ejemplo rápido para probar en https://github.com/leighquince/HighChartLocalExport local
Tal vez este enlace puede ayudarte.
Intente consulte las propiedades de exportación (fallbackToExportServer: false) y el archivo necesario que se debe incluir (offline-exporting.js).
Mientras que para la exportación todo a la vez parte, actualmente yo mismo también todavía lo intento. Se actualizará aquí si hay alguno.
Esta pregunta es un poco antigua, pero fue algo en lo que estuve trabajando recientemente y tuve algunos problemas con ella.
Usé la biblioteca jsPDF: https://github.com/MrRio/jsPDF
Los problemas con los que me encontré involucrado fueron que jsPDF no admite la imagen SVG exportada por el gráfico alto + las imágenes son borrosas y de baja calidad.
A continuación se muestra la solución que utilicé para obtener dos cuadros en un documento pdf:
function createPDF() {
var doc = new jsPDF(''p'', ''pt'', ''a4''); //Create pdf
if ($(''#chart1'').length > 0) {
var chartSVG = $(''#chart1'').highcharts().getSVG();
var chartImg = new Image();
chartImg.onload = function () {
var w = 762;
var h = 600;
var chartCanvas = document.createElement(''canvas'');
chartCanvas.width = w * 2;
chartCanvas.height = h * 2;
chartCanvas.style.width = w + ''px'';
chartCanvas.style.height = h + ''px'';
var context = chartCanvas.getContext(''2d'');
chartCanvas.webkitImageSmoothingEnabled = true;
chartCanvas.mozImageSmoothingEnabled = true;
chartCanvas.imageSmoothingEnabled = true;
chartCanvas.imageSmoothingQuality = "high";
context.scale(2, 2);
chartCanvas.getContext(''2d'').drawImage(chartImg, 0, 0, 762, 600);
var chartImgData = chartCanvas.toDataURL("image/png");
doc.addImage(chartImgData, ''png'', 40, 260, 250, 275);
if ($(''#chart2'').length > 0) {
var chart2SVG = $(''#chart2'').highcharts().getSVG(),
chart2Img = new Image();
chart2Img.onload = function () {
var chart2Canvas = document.createElement(''canvas'');
chart2Canvas.width = w * 2;
chart2Canvas.height = h * 2;
chart2Canvas.style.width = w + ''px'';
chart2Canvas.style.height = h + ''px'';
var context = chart2Canvas.getContext(''2d'');
chart2Canvas.webkitImageSmoothingEnabled = true;
chart2Canvas.mozImageSmoothingEnabled = true;
chart2Canvas.imageSmoothingEnabled = true;
chart2Canvas.imageSmoothingQuality = "high";
context.scale(2, 2);
chart2Canvas.getContext(''2d'').drawImage(chart2Img, 0, 0, 762, 600);
var chart2ImgData = chart2Canvas.toDataURL("image/png");
doc.addImage(chart2ImgData, ''PNG'', 300, 260, 250, 275);
doc.save(''ChartReport.pdf'');
}
chart2Img.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chart2SVG)));
}
}
chartImg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chartSVG)));
}
}
scripts para incluir:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
Aquí hay un ejemplo usando la biblioteca pdfmake :
html:
<div id="chart_exchange" style="width: 450px; height: 400px; margin: 0 auto"></div>
<button id="export">export</button>
<canvas id="chart_exchange_canvas" width="450" height="400" style="display: none;"></canvas>
javascript:
function drawInlineSVG(svgElement, canvas_id, callback) {
var can = document.getElementById(canvas_id);
var ctx = can.getContext(''2d'');
var img = new Image();
img.setAttribute(''src'', ''data:image/svg+xml;base64,'' + btoa(unescape(encodeURIComponent(svgElement))));
img.onload = function() {
ctx.drawImage(img, 0, 0);
callback(can.toDataURL("image/png"));
}
}
código de trabajo completo: https://jsfiddle.net/dimitrisscript/f6sbdsps/