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

感谢您的帮助

Answer 1

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

总结：SVG是jsPDF的一个实验函数，不可用，但是。

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

如何使用JavaScript

1 个答案: