我正在尝试在reactjs中使用jsPdf和htmlcanvas2保存PDF文件。该代码段位于react Modal窗口内。我将HTML模板嵌入到由pebble-engine生成的Modal主体中,需要将其另存为PDF。
我已经尝试使用带有质量参数的jspdf来获得高质量的图像。
但是没有'quality'参数,它可以正常工作并且图像质量较低。
以下是我尝试过的代码段。
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>
驻留在模态中吗?