我目前正在处理谷歌图表中的一些图表,但即使我可以在 pdf 中打印图表,我也无法在图表的实际尺寸中做到这一点,如果有人可以指导我如何更改 pdf 的大小以便图表看起来很完整,我留下了功能代码,这样他们就可以复制它并根据需要使用它。
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(dibujarGrafico);
function dibujarGrafico() {
// Tabla de datos: valores y etiquetas de la gráfica
var data = google.visualization.arrayToDataTable([
['Mes', 'Enviado'],
['Ene', 20.21],
['Feb', 4.28],
['Mar', 17.26],
['Abr', 11.25],
['Mayo', 14.25],
['Jun', 5.25],
['Jul', 8.15],
['Ago', 15.22],
['Sept', 4.67],
['Oct', 9.24],
['Nov', 10.05],
['Dic', 6.75]
]);
var options = {
title: 'Envios durante el año en curso',
colors: ['green'],
};
// Dibujar el gráfico
var container = document.getElementById('GraficoGoogleChart-ejemplo-1');
var chart = new google.visualization.ColumnChart(container);
//codigo para exportar a PDF
var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () {
btnSave.disabled = false;
});
btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.addImage(chart.getImageURI(), 0, 0);
doc.save('chart.pdf');
}, false);
//
chart.draw(data, options);
}
</script>
</head>
<input id="save-pdf" type="button" value="Exportar a PDF" disabled />
<i aria-hidden="true"></i>
<div id="GraficoGoogleChart-ejemplo-1" style="width: 1000px; height: 200px">
您可以在创建 jsPDF 对象时在选项中指定所需的 pdf 页面大小:
例如:
第一个参数 l 来自 'landscape' 或 'portrait',第二个参数是度量单位 'mm' 代表毫米或 'in' 代表英寸,第三个参数是高度和宽度。