html - jspdf 无法正确捕获 div 内容以供 highcharts 下载为 pdf 格式
问题描述
我想在 pdf fprmat 中下载 html 的内容,但在我的情况下,我使用的是 highcharts,但是当我下载 pdf 时,它无法捕获图表的内容,它只能捕获文本内容。我用过所有额外的插件,如 addimage、标准字体等,即使它无法打印。还有我需要使用的任何其他插件,还是我需要为此使用任何 highcharts 插件,这是下面的代码
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML(
$('#container').html(), 15, 15,
{ 'width': 170, 'elementHandlers': specialElementHandlers },
function(){ doc.save('sample-file.pdf'); }
);
});
});
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
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'
}
}
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.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>
<div id="container"></div>
<button id="cmd">generate PDF</button>
解决方案
要下载图表内容,您可以使用 Highcharts 导出。要在自定义按钮上导出,请单击chart.exportChart方法可以使用:
$('#cmd').click(function() {
chart.exportChart({
type: 'application/pdf',
filename: 'my-pdf'
});
});
注意,额外的导出模块必须在 highcharts 脚本之后加载。
文档参考:
https ://www.highcharts.com/docs/export-module/export-module-overview
演示:
https ://jsfiddle.net/wchmiel/ue3pav2g/1/
编辑:
要使用 jspdf 下载多个图表,您必须按照以下步骤操作:
- 将带有每个图表选项的 AJAX 发送到 Highcharts 服务器。返回将是服务器上图像的 URL。
- 将来自 Highcharts 服务器的图像转换为 base64 格式。(您可以使用这种方法:https ://stackoverflow.com/a/20285053/10077925 )
- 使用 jspdf 库将图表图像、徽标、页脚添加到 pdf 并保存结果。
代码:
$('#cmd').click(function() {
var obj = {
options: JSON.stringify(chartOptions),
type: 'image/png',
async: true
},
exportUrl = 'https://export.highcharts.com/',
imgContainer = $("#container"),
doc = new jsPDF(),
chartsLen = 1,
imgUrl;
var calls = [];
for (var i = 0; i < chartsLen; i++) {
calls.push({
type: 'post',
url: exportUrl,
data: obj,
});
}
$.when(
$.ajax(calls[0])
).done(function(c1) {
imgUrl = exportUrl + c1;
toDataURL(imgUrl)
.then(dataUrl => {
doc.setFontSize(30);
doc.text(35, 25, 'First caption');
doc.addImage(dataUrl, 'PNG', 15, 40);
doc.text(35, 175, 'Second caption');
doc.addImage(dataUrl, 'PNG', 15, 185);
doc.save('sample-file.pdf');
})
});
});
推荐阅读
- python - 如何对 DataFrame 列中的列表元素进行排序
- lua - 功能差异
- dynamic - React-leaflet 问题创建
实例动态 - arduino - ESP32 rj45 无法正常工作(使用 HTTPClient、MQTTClient、WiFiClientSecure 和以太网)
- arrays - React 中的输入自动完成:如何更新 UI 中的映射数组?
- html - 在 Thymeleaf 图像未显示
- flutter - RenderFlex 可以使用整个 Row() 并适应溢出的 Text() 元素吗?
- javascript - React 表单验证最小值和最大值以及可逆
- c - 在 c 中释放一个 char**[]
- firebase - Firebase Cloud 函数中用于创建 PDF 的自定义字体