Я пытаюсь сохранить PDF-файл, используя jsPdf и htmlcanvas2 вactjs. Сегмент кода находится в реагирующем модальном окне. Я встраиваю шаблон HTML в модальное тело, сгенерированное pebble-engine, которое необходимо сохранить в формате PDF.
Я пробовал jspdf с параметром качества для высококачественного изображения.
Но без параметра «качество» он работает нормально и дает низкое качество изображения.
Ниже приведен фрагмент кода, который я пробовал.
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(''));
};
Внутри React Modal необходимость в параметре включена следующим образом.
....
<Modal.Body>
<div id="print-div" className="print-div" ref={r => this.quotationTemplate = r}>
{parse(this.state.evaluatedTemplate)}
</div>
<Modal.Footer> ....
Когда он запускается в браузере, он выдает ошибку как uncaught exception: Provided element is not within a Document.
Это потому что <div> находится внутри Модала?