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

Question

我在这里使用的是jspdf。我也在使用Highchart插件当您点击submit1按钮时，图表将生成，当您按下下载按钮时，这些图表将以pdf格式下载。一切都正常，但我只需要减少下载的pdf中图表标题的字体大小。http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview这是我在plunker的现场演示。这里还有html和javascript代码

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>

脚本

$(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

单击download按钮后，可以在setTitle方法中更改font-size标题样式：

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

现场演示：http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview

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