Question

我已经在单个pdf页面（A3布局）上开发了多个高图表的导出，该页面由6个图形和相对文本组成。

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

当我单击“导出PDF”按钮时，将下载包含所有图表和文本的pdf（在示例示例中，我仅复制了一张图表）。

在下载的文档上单击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种非常简单的解决方案：

对您的打印机进行细枝操作，使其能够在页面顶部打印文件
更改图形大小，使其适合您的打印页面（例如height="2100" width="2970"）
更改pdf文档的大小，以使导出的文档已经适合顶部的SVG图

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

1 个答案: