jspdf не отображается при правильной высоте и ширине в пикселях - PullRequest
Новая
       12

jspdf не отображается при правильной высоте и ширине в пикселях

1 голос
/ 26 апреля 2020

У меня есть хук useEffect в React, который преобразует мою страницу в PDF. Я не могу заставить его конвертировать всю страницу и только всю страницу в PDF, используя правильные измерения пикселей. Ширина и высота всегда слишком малы. Когда я увеличиваю и уменьшаю масштаб в браузере, это влияет на соотношение сторон PDF.

Как мне установить ширину и высоту равными ширине и высоте исходной страницы в пикселях, и сделать соотношение сторон всегда 1?

Хук преобразуется в png, затем pdf и png часть выглядит нормально? 

useEffect(() => {
    if (reportRef.current) {
        let node = reportRef.current;
        let reportHeight = reportRef.current.offsetHeight
        console.log("REPORT HEIGHT", reportHeight)

        htmlToImage.toPng(node)
        .then(function (dataUrl) {
            const pdf = new jsPDF('p', 'px', [reportHeight, 555]);
            pdf.addImage(dataUrl, 'PNG', 0, 0);
            pdf.save("download.pdf"); 
        })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });}
}, [reportRef])

Этот код отображает правильную ширину, но обрезает изображение: 

    useEffect(() => {
    if (reportRef.current) {
        let node = reportRef.current;
        let reportHeight = reportRef.current.offsetHeight * 0.7
        let reportWidth = reportRef.current.offsetWidth*0.7
        console.log("REPORT HEIGHT", reportHeight)

        htmlToImage.toPng(node)
        .then(function (dataUrl) {
            const pdf = new jsPDF('p', 'px', [11000, 555]);

            pdf.addImage(dataUrl, 'PNG', 0, 0, reportWidth, reportHeight);
            pdf.save("download.pdf"); 
        })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });}
}, [reportRef])
...