PDF页面上的多个Highcharts - SVG页面布局

Question

我已在单个pdf页面（A3布局）上开发了多个高级图表的导出，其中包含6个图形和相关文本。

功能正常。以下是我的代码的链接。

Link

当我单击“导出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>');

Answer 1

您的SVG正在形成方形图像2000x2000（height="2000" width="2000"）。

您的打印机可能设置为A4或Letter格式，即210×297毫米（A4） - 不是方形。

此外，您的打印机会尝试将文档内容（PDF）居中，从而导致空白区域和图形下方。

有3个非常简单的解决方案：

1. 将打印机旋转，以便在页面顶部打印文件
2. 更改图表大小，使其适合您的打印页面（例如height="2100" width="2970"）
3. 更改您的pdf文档大小，以便导出的文档已经适合顶部的SVG图形