如何使用 JavaScript 将 SVG 导出为 PDF答案

【问题标题】：How to export a SVG in a PDF using JavaScript如何使用 JavaScript 将 SVG 导出为 PDF
【发布时间】：2017-05-30 13:09:06
【问题描述】：

我在一些 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 为“chart”的 div，这就是我要保存为 PDF 的元素。

感谢您的帮助

【问题讨论】：

jsPDF 的文档似乎没有正确记录插件。有一个jsPDF.addSVG() 方法，看这里：rawgit.com/MrRio/jsPDF/master/docs/plugins_svg.js.html
感谢您的回答。我保存了我的 SVG： const svg = source.getElementsByTagName('svg')[0];然后我对其进行序列化： const svg_xml = (new XMLSerializer).serializeToString(svg); （有效）当调用 pdf.addSVG(svg_xml, 0, 0, 500, 300);它似乎不起作用。我没有收到错误，但 PDF 中没有显示任何内容。有什么想法吗？

标签： javascript jspdf pdfkit

【解决方案1】：

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

综上所述：SVG 是 jsPDF 的一个实验性功能，目前不可用。

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

【讨论】：