JSPDF不将SVG作为DOM元素

发布于 2025-02-06 12:16:47 字数 925 浏览 2 评论 0原文

我在React Js中使用JSPDF。我在A< svg>中挂上一些内容和图纸。当我想渲染PDF时,SVG中的所有内容都不会呈现。是否有任何解决方案可以解决此问题或将SVG导出到PDF?我希望PDF内的文本也可以选择,我不想仅仅将SVG转换为图片并将其丢弃到PDF中,这不是解决方案。以下是我不起作用的代码

import React from 'react'
import jsPDF from 'jspdf'
const About = () => {

const downloadPDF = () => {
        let doc = new jsPDF("p","pt","a4")
        doc.html(document.querySelector("#graph"), {
            callback: function(pdf){
                pdf.save("doc.pdf");
            }
        })
    }
 return (
         <div id = "graph">
            Some text // {/*This is rendered */}
            <h1>some title</h1> {/*This is rendered */}
            <svg  width="500" height="500"> {/*This is not rendered */}
                <circle cx="50" cy="80" r={radius} stroke="rgb(0,125,225)" stroke-width="2" fill="red"/>
            </svg>
         </div>
  )
}

export default About

I am using jsPDF in React js. I am crating some content and drawings inside a <svg>. When I want to render the pdf, everything inside the SVG is not rendered. Is there any solution to solve this or another one to export the SVG to pdf? I want the text inside the pdf to be selectable as well, I don't want just to transform the SVG into a picture and drop it into a pdf, that is not a solution. Below is my code that is not working

import React from 'react'
import jsPDF from 'jspdf'
const About = () => {

const downloadPDF = () => {
        let doc = new jsPDF("p","pt","a4")
        doc.html(document.querySelector("#graph"), {
            callback: function(pdf){
                pdf.save("doc.pdf");
            }
        })
    }
 return (
         <div id = "graph">
            Some text // {/*This is rendered */}
            <h1>some title</h1> {/*This is rendered */}
            <svg  width="500" height="500"> {/*This is not rendered */}
                <circle cx="50" cy="80" r={radius} stroke="rgb(0,125,225)" stroke-width="2" fill="red"/>
            </svg>
         </div>
  )
}

export default About

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文