using skill : spring, chart.js, jsp, html2pdf
I want to send a pdf with charts by report email.
current situation
- I rendered html to pdf containing a chart(changed to image) made with chart.js in frontend(jsp).
- When the url is accessed, the pdf is sent to the server (spring) with the ajax declared in onload().
- I make an email with pdf attached in spring method.
(ex) url '/chart' access -> rendering html (included chart.js) -> ajax() url : /test.js (return pdf to base64)
window.onload = function() {
var chart0 = new Chart(document.getElementById("myChart0"), {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ 'January', 'Februggary', 'ggMarch', 'Aggpril', 'May',
'June', 'July' ],
datasets : [ {
label : 'My First dataset',
backgroundColor : 'rgb(255, 99, 132)',
borderColor : 'rgb(255, 99, 132)',
data : [ 0, 10, 5, 2, 20, 30, 45 ]
} ]
},
options : {
animation : {
duration : 0
}
}
});
for ( var id in Chart.instances) {
Chart.instances[id].resize();
Chart.instances[id].draw('1s');
Chart.instances[id].render('1s');
document.getElementById("img" + id).src = Chart.instances[id]
.toBase64Image();
}
var element = document.getElementById('element-to-print');
html2pdf().from(element).set({
type:'png',
margin: [50,0,50,0],
filename : 'test.pdf',
pagebreak : {
mode : [ "css" ],
after : [ ".break" ]
},
jsPDF: {
unit: 'pt',
format: 'a4',
orientation: 'portrait'
}
}).outputPdf().then(function(pdf) {
// Convert to base 64
var newpdf = btoa(pdf);
console.log(pdf);
$.ajax({
url : 'test.json', // make email using pdf
type : 'post',
traditional : true,
data : {newpdf:newpdf},
success : function (data) {
if (data.result) {
alert("success");
} else {
alert("fail");
}
}
});
});
}#element-to-print {
width: 21cm;
min-height: 29.7cm;
padding: 1.5cm 1.5cm 2cm 1.5cm;
/* margin: auto; */
}
#chartContainer {
width: 80%;/*
margin: auto; */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../resources/js/Chart.bundle.js"></script>
<script src="../resources/js/jquery-3.5.1.min.js"></script>
<script src="../resources/js/test.js"></script>
<script src="../resources/js/html2pdf.bundle.min.js"></script>
<link href="../resources/css/test.css" rel="stylesheet" />
</head>
<body>
<div id="element-to-print">
<div id="chartContainer">
<div>
testtesttesttest
<canvas id="myChart0" style="display: None"></canvas>
test
</div>
<div class="break">
testtest
<img id="img0" src="" />
test test
</div>
</div>
</div>
</body>
</html>question here I need to access the url with spring scheduler. how to access? OR Is there another way to create a pdf containing charts made with chart.js on the spring server or import it from the frontend?