I am using Draft.js and jsPDF and there is a text editor, that I am trying to extract the html contents
of the current page in order to save it as pdf.
exportAsPDF = () => {
let fileName = '';
swal({
title: 'Input file Name',
input: 'text',
inputPlaceholder: 'File name',
allowOutsideClick: false,
showCancelButton: true
})
.then(data => {
fileName = data.value;
if (fileName) {
//Get the element that we need to save as pdf
const page = document.getElementsByClassName('page rdw-editor-main');
const pdfDocument = new jsPDF({
orientation: 'p',
unit: 'px',
format: 'a4'
});
pdfDocument.html(page[0], {
callback: function(doc) {
doc.save(`${fileName}.pdf`);
}
});
}
})
.catch(error => swal('Error!', `Something went wrong!`, 'Error'));
};
render() {
return (
<div className="flex-container">
......
<button id="exportPDF" className="button" onClick={this.exportAsPDF}>
Export as PDF
</button>
.....
</div>
<ZEditor ref={this.child} setDownloadState={this.setDownloadState} />
</div>
);
}
This is how it looks like in browser
Yet when I press on the Export as PDF button, it should save the white page container in the middle of the page only. But it looks like this in the final output
As seen in the screenshot above, the content is so zoomed in, and the font does not match the font in the page.
Below is also the CSS for the page rdw-editor-main element.
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm auto;
margin-top: 150px;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.rdw-editor-main {
height: 100%;
overflow: auto;
box-sizing: border-box;
}
Is there anything wrong in the jsPDF options? And is there any other better way to extract Draft.js ContentState to pdf?
