diegomura
Infinity Pending when using PDFDownloadLink
`"use client";
import { useAppSelector } from "../../../../utils/redux/hooks"; import { selectResume } from "../../../../utils/redux/resumeSlice"; import { selectSettings } from "../../../../utils/redux/settingsSlice"; import { useMemo, useRef, useState } from "react"; import { FlexboxSpacer } from "../FlexboxSpacer"; import { ResumeIFrameCSR } from "./ResumeIFrameCSR"; import { ResumePDF } from "./ResumePDF"; import { useRegisterReactPDFFont, useRegisterReactPDFHypenationCallback, } from "../fonts/hooks"; import { ResumeControlBarCSR } from "./ResumeControlBarCSR"; import { pdf, PDFDownloadLink } from "@react-pdf/renderer"; import { saveAs } from "file-saver";
export const Resume = () => { const [scale, setScale] = useState(0.8); const resume = useAppSelector(selectResume); const settings = useAppSelector(selectSettings); const document = useMemo( () => <ResumePDF resume={resume} settings={settings} isPDF={true} />, [resume, settings] );
useRegisterReactPDFFont(); useRegisterReactPDFHypenationCallback(settings.fontFamily);
return (
<>
<div className="relative flex justify-center md:justify-start">
<FlexboxSpacer maxWidth={50} className="hidden md:block" />
<div className="relative">
<section className="h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden md:p-[var(--resume-padding)]">
<ResumeIFrameCSR
documentSize={settings.documentSize}
scale={scale}
enablePDFViewer={false}
>
<ResumePDF resume={resume} settings={settings} isPDF={false} />
</ResumeIFrameCSR>
<ResumeControlBarCSR
scale={scale}
setScale={setScale}
documentSize={settings.documentSize}
document={document}
fileName={resume.profile.name + " - Resume"}
/>
<div className="mt-4">
<PDFDownloadLink
document={document}
fileName={${resume.profile.name} - Resume.pdf}
style={{
textDecoration: "none",
color: "#000",
backgroundColor: "#f0f0f0",
padding: "10px",
borderRadius: "5px",
}}
>
{({ blob, url, loading, }) =>
loading ? "Loading document..." : "Download PDF"
}
</PDFDownloadLink>
</>
);
};
import {
DEFAULT_FONT_COLOR,
Settings,
} from "../../../../../utils/redux/settingsSlice";
import { Resume } from "../../../../../utils/redux/types";
import {
Document,
PDFDownloadLink,
Page,
View,
pdf,
} from "@react-pdf/renderer";
import { styles, spacing } from "./styles";
import { ResumePDFProfile } from "./ResumePDFProfile";
import { ShowForm } from "../../../../../utils/redux/settingsSlice";
import { ResumePDFWorkExperience } from "./ResumePDFWorkExperience";
import { ResumePDFEducation } from "./ResumePDFEducation";
import { ResumePDFProject } from "./ResumePDFProject";
import { ResumePDFSkills } from "./ResumePDFSkills";
import { ResumePDFCustom } from "./ResumePDFCustom";
export const ResumePDF = ({ resume, settings, isPDF = false, }: { resume: Resume; settings: Settings; isPDF?: boolean; }) => { const { profile, workExperiences, educations, projects, skills, custom } = resume; const { name } = profile;
const { documentSize, fontFamily, fontSize, themeColor, formToHeading, formsOrder, formToShow, showBulletPoints, } = settings;
const showFormsOrder = formsOrder.filter((form) => formToShow[form]);
const formTypeToComponent: { [type in ShowForm]: () => JSX.Element } = { workExperiences: () => ( <ResumePDFWorkExperience heading={formToHeading["workExperiences"]} workExperiences={workExperiences} themeColor={themeColor} /> ), educations: () => ( <ResumePDFEducation heading={formToHeading["educations"]} educations={educations} themeColor={themeColor} showBulletPoints={showBulletPoints["educations"]} /> ), projects: () => ( <ResumePDFProject heading={formToHeading["projects"]} projects={projects} themeColor={themeColor} /> ), skills: () => ( <ResumePDFSkills heading={formToHeading["skills"]} skills={skills} themeColor={themeColor} showBulletPoints={showBulletPoints["skills"]} /> ), custom: () => ( <ResumePDFCustom heading={formToHeading["custom"]} custom={custom} themeColor={themeColor} showBulletPoints={showBulletPoints["custom"]} /> ), };
return (
<>
<Document title={${name} Resume} author={name} producer={"Inhouse"}>
<Page
size={documentSize === "A4" ? "A4" : "LETTER"}
style={{
...styles.flexCol,
color: DEFAULT_FONT_COLOR,
fontFamily,
fontSize: fontSize + "pt",
}}
>
{Boolean(settings.themeColor) && (
<View
style={{
width: spacing["full"],
height: spacing[3.5],
backgroundColor: themeColor,
}}
/>
)}
<View
style={{
...styles.flexCol,
padding: ${spacing[0]} ${spacing[20]},
}}
>
<ResumePDFProfile
profile={profile}
themeColor={themeColor}
isPDF={isPDF}
/>
{showFormsOrder.map((form) => {
const Component = formTypeToComponent[form];
return <Component key={form} />;
})}
</View>
</Page>
</Document>
</>
);
};
`
I'm having trouble downloading PDFs using PDFDownloadLink. It always displays "Loading Document.." When I log blob, url, they are null
