##HTML to pdf download html2canvas.js clear optimization
1. Recently I encountered a development problem (HTML to pdf). I found a lot of information. Here is a demo I wrote for your reference
<body>
<div id="main" style="height:400px"></div>
<button onclick="createPDFObject()">download pdf</button>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'white',
title: {
text: 'ECharts Getting started example'
},
tooltip: {},
legend: {
data: ['sales volume']
},
xAxis: {
data: ["shirt", "Cardigan", "Chiffon shirt", "trousers", "high-heeled shoes", "Socks"]
},
yAxis: {},
series: [{
name: 'sales volume',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
var option1 = {
backgroundColor: 'white',
title: {
text: 'ECharts Getting started example'
},
tooltip: {},
legend: {
data: ['sales volume']
},
xAxis: {
data: ["shirt", "Cardigan", "Chiffon shirt", "trousers" ]
},
yAxis: {},
series: [{
name: 'sales volume',
type: 'bar',
data: [5, 20, 36, 10]
}]
};
myChart.setOption(option1);
</script>
<script type="text/javascript">
function createPDFObject() {
html2canvas(document.getElementById("main"), {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//One page pdf shows the height of canvas generated by html page;
var pageHeight = contentWidth / 592.28 * 841.89;
//html page height without pdf generation
var leftHeight = contentHeight;
//Page offset
var position = 0;
//a4 paper size [595.28841.89], width and height of image in pdf of canvas generated by html page
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
//Return picture dataURL, parameters: picture format and sharpness (0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//Direction is vertical by default, dimension ponits, format A4 [595.28841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//There are two heights to distinguish, one is the actual height of the html page, and the height of the generated pdf page (841.89)
//When the content does not exceed the display range of one page of pdf, paging is not required
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//Avoid adding blank pages
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('stone.pdf');
}
});
}
-
First, introduce the two JS html2canvas.js and jspdf.debug.js
-
Mr. Wang creates a statistical histogram and uses html2canvas to turn HTML into a picture
//Return picture dataURL, parameters: picture format and sharpness (0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0); -
Finally generate pdf and download
//There are two heights to distinguish, one is the actual height of the html page, and the height of the generated pdf page (841.89)
//When the content does not exceed the display range of one page of pdf, paging is not required
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//Avoid adding blank pages
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('stone.pdf');