javascript - 将整个 HTML 文档下载为 PDF 文件

Question

我尝试通过 React 应用程序中的html2PDF函数下载特定的 html 文档。这是我的代码：

import React, { FunctionComponent, useEffect, useState }      from "react";
import { Grid, CircularProgress }                             from "@material-ui/core";
import { getUserExamResult }                                  from "@containers/dashboard/users/websiteUsers/tools/api";
import html2PDF                                               from "jspdf-html2canvas";

export interface UserExamFullResultProps {
    data: any;
}

const UserExamFullResult: FunctionComponent<UserExamFullResultProps> = ({
    data,
}) => {
    const [examResultHtml, setExamResultHtml] = useState();

    useEffect(() => {
        (async () => {
            try {
                const result = await getUserExamResult(
                    data?.userProfileId,
                    data?.examId,
                    {}
                );
                setExamResultHtml(result?.resultPage);
            } catch (err) {}
        })();
    }, []);

    useEffect(() => {
        const targetElement = document.getElementById("exam-result");
        if (targetElement) {
            targetElement.innerHTML = examResultHtml;
        }
    }, [examResultHtml]);

const handleExamResultDownload = () => {
    const element = document.getElementById("exam-result");

    html2PDF(element, {
        jsPDF: {
            format: "a4",
        },
        imageType: "image/jpeg",
        output: "./pdf/generate.pdf",
    });
};

    return (
        <>
            {examResultHtml ? (
            <Grid container direction="column" alignItems="center" justify="center">
                <Tooltip color="action" title="دانلود نتیجه‌ی کامل" placement="right">
                    <IconButton onClick={handleExamResultDownload}>
                        <GetApp/>
                    </IconButton>
                </Tooltip>
                <div id="exam-result"></div>
            </Grid>
            ) : (
                <Grid
                    style={{ width: "100%", height: "500px" }}
                    container
                    justify="center"
                    alignItems="center"
                >
                    <Grid item style={{ textAlign: "center" }}>
                        <CircularProgress />
                    </Grid>
                </Grid>
            )}
        </>
    );
};

export default UserExamFullResult;

我之前提到的特定 HTML 文档来自 API 并显示在此链接中，而损坏的输出 PDF 文件显示在此链接中。如您所见，PDF 文件图像未加载且分页不合适。

标签： javascripthtmlreactjstsx