【发布时间】：2019-07-18 18:24:41
【问题描述】：
我开发了在单个 pdf 页面（A3 布局）上导出多个高图，其中包含 6 个图表和相关文本。
该功能运行良好。以下是我的代码的链接。
当我点击“导出 PDF”按钮时，会下载包含所有图表和文本的 pdf（我在示例示例中只复制了 1 个图表）。
当您在下载的文档上单击 ctrl+p 进行打印时，用户可以在 pdf 页面的顶部和底部看到大量额外的空白。不应该有任何这样的额外空白。在下载的文档中没有这样的空白。
如何修改 SVG 元素的高度和宽度等问题。
$(function () {
Highcharts.getSVG = function(charts,texts, options, callback) {
var svgArr = [],
top = 0,
width = 0,
newLine = false,
txt,txt1,txt2,txt3,txt4,txt5,txt6,txt7,txt8,txt9,txt10,txt11,txt12,txt13,txt14,txt15,txt16,txt17,txt18,txt19,txt20,txt21,txt22,txt23,txt24,txt25,txt26;
addSVG = function(svgres,i) {
// Grab width/height from exported chart
var svgWidth = +svgres.match(
/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
svgHeight = +svgres.match(
/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
// Offset the position of this chart in the final SVG
svg;
if (svgWidth > 900) {
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')"');
}else{
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', 0 )"');
}
top = Math.max(top, svgHeight);
} else {
if (newLine) {
if(i==4){
width = 800;
}
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', ' + top + ')"');
top += svgHeight;
width += svgWidth;
newLine = false;
} else {
newLine = true;
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}else{
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}
top = Math.max(top, svgHeight);
width += svgWidth;
//width = Math.max(width, chart.chartWidth);
}
}
svg = svg.replace('</svg>', '</g>');
svgArr.push(svg);
txt = texts[i];
},
exportChart = function(i) {
if (i === charts.length) {
// add SVG image to exported svg
//addSVG(svgImg.outerHTML);
//addSVG(svgImg.outerHTML);
//console.log(top+'-----'+width);
return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
}
charts[i].getSVGForLocalExport(options, {}, function() {
console.log("Failed to get SVG");
}, function(svg) {
addSVG(svg,i);
return exportChart(i + 1); // Export next only when this SVG is received
});
};
//console.log(svgArr);
exportChart(0);
};
Highcharts.exportCharts = function(charts,texts, options) {
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Get SVG asynchronously and then download the resulting SVG
Highcharts.getSVG(charts,texts, options, function(svg) {
Highcharts.downloadSVGLocal(svg, options, function() {
console.log("Failed to export on client side");
});
});
};
//Set global default options for all charts
Highcharts.setOptions({
exporting: {
fallbackToExportServer: false // Ensure the export happens on the client side or not at all
}
});
如果我增加 SVG 的高度，那么它也会增加宽度
return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
【问题讨论】：
-
我无法复制它。我有一个正确的 pdf，打印出来的时候和 pdf 一样。
-
您是否考虑过使用额外的库来生成包含多个图表的 pdf，例如 jsPdf？我注意到你有很多硬编码的代码来使用 Highcharts 默认导出模块，它不是为生成复杂的 pdf 而设计的。用 jspdf 检查这个例子：stackoverflow.com/questions/54761784/…
-
@WojciechChmiel，pdf 顶部的空白是否比通常的标题空白大小？我在顶部有 8 行空白，在底部有 6 行空白。
-
@WojciechChmiel，我在打印输出后或点击 ctrl+p 时用白色空间上的红色标记编辑了我的问题
-
是的，pdf的顶部和底部都有一个空白，但这是由内容的格式造成的，因为它适合这样的页面。这是正确的行为。
标签： javascript html svg highcharts