jsPdf生成高质量图像,但未捕获异常:提供的元素不在Document中

时间:2019-06-11 09:57:05

标签: javascript reactjs pdf-generation jspdf html2canvas

我正在尝试在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>驻留在模态中吗?

0 个答案:

没有答案