如何使用jspdf更改下载的pdf中图表标题的字体大小

Question

I am using jspdf here.I am using Highchart plugin also When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf. Everything is working but I need to just reduce the font size of the chart title in downloaded pdf. http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview Here is my live demo in plunker. also here I have the html and javascript code

HTML

<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
 <input type="button" id="download"  value="download" /> click to console
  <div><button id="button1" class="button1">submit1</button></div>
  <p id="bottom-content">footer</p>

SCRIPT

$(document).ready(function() {
    var index = 0;
    var id = [];
    $('#button1').on('click', function() {
        $('body').append($("<div id='chart" + index + "'></div>"));

        Highcharts.chart('chart' + index, {
           title: {
        text: 'Chart-'+index+''
    },
            series: [{
                data: [1, 2, 3]
            }]
        });
        var temp = "chart" + index + "";
        console.log(temp);
        id.push(temp);

        index++;
    });

    $('#download').on('click', function() {
console.log(id);
  var doc = new jsPDF('portrait', 'pt', 'a4', true);
  var elementHandler = {
    '#ignorePDF': function(element, renderer) {
      return true;
    }
  };

  var source = document.getElementById("logo");
  doc.fromHTML(source, 15, 15, {
    'width': 200,
    'elementHandlers': elementHandler
  });

  var DOMURL = window.URL || window.webkitURL || window;
   var elements = id;

 // console.log(xx);
  for (let i in elements) {


      let svg = document.querySelectorAll('svg');
      let canvas = document.createElement('canvas');
      let canvasIE = document.createElement('canvas');
      let context = canvas.getContext('2d');

      let data1 = (new XMLSerializer()).serializeToString(svg[i]);

      canvg(canvas, data1);
      let svgBlob = new Blob([data1], {
        type: 'image/svg+xml;charset=utf-8'
      });

      let url = DOMURL.createObjectURL(svgBlob);

      let img = new Image();
      img.src = url;
      img.onload = function() {
        context.canvas.width = $("#"+elements[i]).find('svg').width();
        context.canvas.height = $("#"+elements[i]).find('svg').height();

        context.drawImage(img, 0, 0);
        // freeing up the memory as image is drawn to canvas
        DOMURL.revokeObjectURL(url);

        var dataUrl;
        if (isIEBrowser()) { // Check of IE browser 
          var svg = $(elements[i]).highcharts().container.innerHTML;
          canvg(canvasIE, svg[i]);
          dataUrl = canvasIE.toDataURL('image/JPEG');
        } else {
          dataUrl = canvas.toDataURL('image/jpeg');
        }

        doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);

          let bottomContent = document.getElementById("bottom-content");
  doc.fromHTML(bottomContent, 15, 700, {
    'width': 560,
    'elementHandlers': elementHandler
  });

  let logo = document.getElementById("logo");
         doc.fromHTML(logo, 15, 200, {
    'width': 560,
    'elementHandlers': elementHandler
  });

  doc.addPage();

      };



    }


  setTimeout(function() {
    doc.save('TestChart"'+index+'".pdf');
  }, 1000);

});
});
function isIEBrowser() {
  var ieBrowser;
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
  {
    ieBrowser = true;
  } else //Other browser
  {
    console.log('Other Browser');
    ieBrowser = false;
  }

  return ieBrowser;
};

Answer 1

You can change the font-size title style, after click on download button, in setTitle method:

var charts = Highcharts.charts;

charts.forEach(function(chart){
  chart.setTitle({
    style: {
      fontSize: '32px'
    }
  });
}); 

Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview

API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle