如何使用JavaScript将SVG导出为PDF

Question

我有一个包含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为"chart"的div元素，这就是我要保存为PDF的元素。

谢谢您的帮助。

- Amthieu

---

jsPDF的文档似乎没有很好地记录插件。这里有一个jsPDF.addSVG()方法，请参见此处：http://rawgit.com/MrRio/jsPDF/master/docs/plugins_svg.js.html - ccprog

谢谢你的回答。我用以下代码保存了SVG：const svg = source.getElementsByTagName('svg')[0];然后我序列化它：const svg_xml = (new XMLSerializer).serializeToString(svg); （这个可以工作）当调用pdf.addSVG(svg_xml, 0, 0, 500, 300)时，它似乎不起作用。我没有收到错误消息，但PDF中没有显示任何内容。有什么想法吗？ - Amthieu

Answer 1

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

总之：SVG是jsPDF的试验性功能，但目前无法使用。

（由于我在一个项目中迫切需要这个功能，并且我自己编写了几个SVG解析器，所以我可能很快就会实现它并创建一个pull request。）

- HotKey