如何使用 javascript 将 JSPDF 中的 SVG 文件转换为 PDF

我很难使用 JSPDF 将 SVG 文件转换为 PDF。我在这里工作了以下代码。

 var doc = new jsPDF();
    var test = $.get('amChart.svg', function(svgText){
    //  console.log(svgText);
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        console.log(svgAsText);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)
//console.log(doc);
        // Save the PDF
  doc.output('datauri');
    });

我从这里得到这个脚本所以答案 https://stackoverflow.com/questions/23340610/how-to-create-easily-a-pdf-from-a-svg-with-jspdf.仅其结果空白PDF.When i console.log(doc)在输出之前它会显示结果。但它不会导致PDF...

我也在工作SVGEMENTOPDF函数由此GitHub 网址 https://github.com/CBiX/svgToPdf.js/我也在这段代码中工作过。

// I recommend to keep the svg visible as a preview
var svg = $('#container > svg').get(0);
// you should set the format dynamically, write [width, height] instead of 'a4'
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svg, pdf, {
    scale: 72/96, // this is the ratio of px to pt units
    removeInvalid: true // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer

但我无法实现它..请告诉我...如何解决这个问题JSPDF

对我有用的是：

1. Use svg撬棍 https://github.com/NYTimes/svg-crowbar序列化 SVG

   var uri = svgCrowbar(eGraph);
   

2. 使用 canvas 将序列化的 SVG 写入 PNG dataURI

   // Create image object which will enable the graph to be saved (via canvas)
   var image = new Image();
   image.onload = function () {
       // Create canvas 
       var canvas = document.createElement('canvas');
       canvas.width = image.width;
       canvas.height = image.height;
       var context = canvas.getContext('2d');
       context.drawImage(image, 0, 0);
   
       // Save DataURI for later use
       window.sitescriptdata.dataURI[id] = canvas.toDataURL('image/png');
       window.sitescriptdata.numDataURIsLoaded++;        
   
       ...
   
   };
   image.src = uri;
   

3. 使用 jsPDF.addImage() 将该 PNG 嵌入到 PDF 中

使用这种方法，我能够将多个动态生成的 SVG 嵌入到单个 PDF 中。我对结果不是 100% 满意，因为 PDF 上的图像看起来扭曲，但可能我需要对 jsPDF 设置进行更多调整，以使所有内容看起来清晰。