javascript - 如何使用 JavaScript 在 PDF 中导出 SVG

Question

我在一些 HTML 中有一个 SVG 元素，我希望能够将所有 HTML 导出为 PDF。我已经能够使用 jsPDF 从 HTML 创建 PDF，但是 SVG 元素被忽略了。

重要说明:我不想将 SVG 转换为非矢量格式，然后将该元素插入到 PDF 中。

class ToPDF extends Component {
    constructor(props){
        super(props);
        this.convertToPdf=this.convertToPdf.bind(this);
    }

    convertToPdf() {
        let pdf = new jsPDF('p', 'pt', 'letter');
        const elementHandlers = {
            '#bypassme': function(element, renderer) {
                return true
            }
        };

        const source = document.getElementById('chart');
        pdf.fromHTML(
            source, 
            50, 
            50, 
            {
                'width': 600,
                'elementHandlers': elementHandlers
            }
        );

        pdf.save('test.pdf');
    }

    render() {
        return (
            <div>
                <div id='chart'>
                    <h2>HTML to PDF</h2>
                    <p>Let's try converting this chart to a PDF</p>
                    <svg width="500" height="300">
                        <g>
                            <circle cx="100" cy="100" r="2"></circle>
                            <circle cx="200" cy="200" r="2"></circle>
                        </g>
                    </svg>
                </div>
                <button onClick={this.convertToPdf}>Download PDF</button>
            </div>
        );
    }
}

我简化了代码，但基本上我只是渲染一个包含 HTML 和 SVG 的组件。呈现的 HTML 包含一个 id 为“图表”的 div，这是我要保存为 PDF 的元素。

谢谢你的帮助

Answer 1

我还需要使用 jsPDF 包含 SVG。但是解析器似乎并不接受所有的 SVG。它只解析 SVG 第一级中的 PATH 元素。它要求所有路径字符串元素用空格分隔(我从未见过任何程序实际导出)。而且它只支持“c”和“l”指令。所以它不是一个“真正的”SVG 解析器，而是一个概念验证。

总结:SVG是jsPDF的一个实验性功能，目前还不可用。

(因为我迫切需要一个项目的功能并且我自己编写了几个 SVG 解析器，所以我可能会实现它并很快创建一个拉取请求。)