I am trying to save a PDF file using jsPdf and htmlcanvas2 in reactjs. The code segment is resided inside a react Modal window. I am embedding an HTML template inside the Modal body generated by pebble-engine which is needed to be saved as a PDF.
I have tried jspdf with the quality parameter for a high-quality image.
But without the 'quality' parameter it works fine and gives a low quality image.
Following is the code segment I have tried.
printTest =(quality = 2) =>{
const filename = 'quotation.pdf';
//let element11 = document.querySelector("#print-div")[0];
let base64txt = this.b64EncodeUnicode(this.quotationTemplate);
html2canvas(base64txt,
{scale: quality}
).then(canvas => {
let pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, 211, 298, 'someAlias', 'FAST');
pdf.save(filename);
});
};
b64EncodeUnicode = (str) =>{
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
return String.fromCharCode('0x' + p1);
}));
};
b64DecodeUnicode =(str)=> {
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
};
Inside the React Modal, the need to parameter is included as follows.
....
<Modal.Body>
<div id="print-div" className="print-div" ref={r => this.quotationTemplate = r}>
{parse(this.state.evaluatedTemplate)}
</div>
<Modal.Footer> ....
When it runs in the browser, it gives the error as uncaught exception: Provided element is not within a Document.
Is this because the <div> is residing inside a Modal?