Как вызвать html2canvas в следующем. js - PullRequest
Новая
       7

Как вызвать html2canvas в следующем. js

0 голосов
/ 06 апреля 2020

Привет, я использую Next lib в своем проекте и хочу сделать скриншот моей веб-страницы и сделать PDF. Я написал функцию, которая делает снимок экрана и печатает в формате PDF, он работает нормально, но я хочу вызвать его в хуках и вернуться к URL "/", но он не работает в нем. Покажите ошибку, что по умолчанию не определено. Это похоже на проблему обещания, я перепробовал все возможные пути, но не могу найти решение. Пожалуйста, помогите мне 

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

function pdf(props) {
    const classes = useStyles();
    const router = useRouter();
    const [html2canvas, setCanvas] = useState();
    const [responseData, setData] = useState();


    useEffect(() => {
        if (typeof window !== "undefined") {
            import("html2canvas").then(pdfhtml => {
                setCanvas(pdfhtml);
            });
        }
        const pdf = new jsPDF('p', 'mm', 'a4', true);
        pdf.then(data => {
            setPdf(data.default);
        })



       print()

    }, [])

    const print = async () => {
        const firstPage = await html2canvas.default(document.querySelector('#PDfDownload'), {
            scrollX: 0,
            scrollY: -window.scrollY,

        });


        pdfGenerate.addImage(firstPage.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, width, height);

        pdfGenerate.output("save", `Sample.pdf`);
    }

    return (
        <div style={{ width: '100%' }}>
            <Box className={classes.background} id="PDfDownload" >
                        <img style={{ width: "100px", height: "100px" }} src={logo} alt="" />
                        <Box display="inline">
                            <Typography variant="h4" className={classes.h3}>
                                Mapzot
                            </Typography>
                            <Typography variant="overline" className={classes.overline}>
                                www.mapzot.com
                            </Typography>
                        </Box>
                    </Box>


            <Button variant="contained" color="primary" onClick={print}>
                Download Report
            </Button>
        </div >
    )
}


export default pdf
...