我创建了一个组件,并尝试使用jsPDF包将其转换为PDF。
它使用useRef钩子来动态设置组件的useEffect中的高度和宽度,输入由state中设置的id定义,然后将其传递给函数调用,以尝试将其添加为要导出的图像。
下面是导出函数:
const exportToPdf = () => {
const input = document.getElementById(active)
if (input != null) {
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'png', height, width)
pdf.save(`${name}-cv.pdf`)
})
}
}
但是,在'addImage'调用中,它有以下错误:
没有重载需要4个参数,但确实存在需要1个或8个参数的重载。
看看其他类似的答案/问题,人们说这是因为你需要指定高度和宽度-但我这样做。
有人知道我哪里做错了吗?
以下是完整的组件以供参考:
export const CvBuilder = () => {
const options = ["modern", "minimal"]
const [active, setActive] = useState("modern")
const [height, setHeight] = useState(0)
const [width, setWidth] = useState(0)
const modernTemplate = useRef<HTMLDivElement>(null)
const minimalTemplate = useRef<HTMLDivElement>(null)
const { name, previewPhoto, phone, email, aboutMe, twitter, linkedIn, github, skills, jobs, education, sideProjects } = useContext(DataContext) as DataContextType
const exportToPdf = () => {
const input = document.getElementById(active)
if (input != null) {
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'png', height, width)
pdf.save(`${name}-cv.pdf`)
})
}
}
useEffect(() => {
if (modernTemplate.current !== null) {
setHeight(modernTemplate.current.clientHeight)
setWidth(modernTemplate.current.clientWidth)
}
if (minimalTemplate.current !== null) {
setHeight(minimalTemplate.current.clientHeight)
setWidth(minimalTemplate.current.clientWidth)
}
console.log(height)
console.log(width)
}, [active])
return (
<section className="cv-builder-section">
<div className="cv-builder-container">
<CvBackButton />
<h2 className="cv-builder-heading">Your CV</h2>
<div className="cv-select-container">
{ options.map(x => {
return (
<CvOption content={x} handleClick={() => setActive(x)} active={active} />
)
})}
</div>
{ active === "modern" ? <CvTemplate modernTemplate={modernTemplate} name={name} profilePicture={previewPhoto} phone={phone} email={email} aboutMe={aboutMe} twitter={twitter} linkedIn={linkedIn} github={github} skills={skills} jobs={jobs} education={education} sideProjects={sideProjects} /> : null }
{ active === "minimal" ? <CvTemplate2 minimalTemplate={minimalTemplate} name={name} profilePicture={previewPhoto} phone={phone} email={email} aboutMe={aboutMe} twitter={twitter} linkedIn={linkedIn} github={github} skills={skills} jobs={jobs} education={education} sideProjects={sideProjects} /> : null }
</div>
</section>
)
1条答案
按热度按时间iqjalb3h1#
我已经想明白了,如果有人来这里做将来的参考,我需要添加x位置和y位置作为参数: