reactjs 尝试导出jsPDF时重载需要x个参数

n3schb8v  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(109)

我创建了一个组件,并尝试使用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>
    )
iqjalb3h

iqjalb3h1#

我已经想明白了,如果有人来这里做将来的参考,我需要添加x位置和y位置作为参数:

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', 0, 0, height, width)
                pdf.save(`${name}-cv.pdf`)
            })
        }
    }

相关问题