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

问题描述

我尝试通过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，显示在this link中，而损坏的输出PDF文件显示在this link中。如您所见，PDF文件图像未加载，因此不适合分页。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）