如何使用JavaScript导出PDF格式的SVG

我在一些HTML内部有一个SVG元素，我希望能够将所有HTML导出为PDF格式。我已经能够使用jsPDF从HTML创建PDF，但是SVG元素被忽略。如何使用JavaScript导出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的元素。

感谢您的帮助

来源

2017-05-30 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）; （That works）当调用pdf.addSVG（svg_xml，0，0，500，300）;它似乎没有工作。我没有收到错误，但PDF内没有显示任何内容。有什么想法？ – Amthieu

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

总结：SVG是jsPDF的一个实验功能，它是不可用，但是。

（因为我desparately需要一个项目，该项目的功能，我已经写了几个SVG解析器我自己，我可能会实现，而且很快创建一个拉请求。）

来源

2017-09-20 09:00:09 HotKey

如何使用JavaScript导出PDF格式的SVG

回答

相关问题