如何使用javascript在JSPDF中将SVG文件转换为PDF [英] How to converted SVG Files into PDF in JSPDF using javascript

问题描述

我努力使用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）; 
 //保存PDF 
 doc.output（'datauri'）; 
}）; 
  

我从这个 SO Answer 。其结果只是空白PDF 。当我 console.log（doc）在输出之前会显示results.But它不会导致 PDF ...

我也是从这个 GITHUB工作 SVGELEMENTOPDF 函数URL ，我也在这段代码中工作。

  //我建议保持svg可见b $ b var svg = $（'＃container> svg'）。get（0）; 
 //你应该动态设置格式，写[width，height]而不是'a4'
 var pdf = new jsPDF（'p'，'pt'，'a4'）; 
 svgElementToPdf（svg，pdf，{
 scale：72/96，//这是px与pt单位的比率
 removeInvalid：true //这将删除无法转换的元素来自源svg 
}）; 
 pdf.output（'datauri'）; //使用output（）来获取jsPDF缓冲区
  

但是我无法实现它。好心劝我......如何在 JSPDF中解决这个问题 解决方案

至： 使用 svgCrowbar 来序列化SVG

  var uri = svgCrowbar（eGraph）; 
  

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

  //创建图像对象，使图形能够保存（通过画布）
 var image = new Image（）; 
 image.onload = function（）{
 //创建画布
 var canvas = document.createElement（'canvas'）; 
 canvas.width = image.width; 
 canvas.height = image.height; 
 var context = canvas.getContext（'2d'）; 
 context.drawImage（image，0，0）; 
 
 //保存DataURI供以后使用
 window.sitescriptdata.dataURI [id] = canvas.toDataURL（'image / png'）; 
 window.sitescriptdata.numDataURIsLoaded ++; 
 
 ... 
 
}; 
 image.src = uri; 
  

使用jsPDF.addImage（）将PNG嵌入到PDF中

使用此方法，我可以将多个动态生成的SVG嵌入到单个PDF中。我对PDF的图像看起来并不满意，但是可能需要对jsPDF设置进行更多的调整才能让所有内容看起来更加清晰。

I struggled to converted SVG Files into PDF using JSPDF. Here i Worked in following code.

 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');
    });

I get this script from this SO Answer.Its results only blank PDF.When i console.log(doc) before output it will shown results.But it will not results in PDF...

And I also i working in SVGELEMENTOPDF function from this GITHUB URL and I worked in this code also.

// 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

But I can`t achieved it..And kindly advise me... How to solve this problem in JSPDF

解决方案

What worked for me was to:

1. Use svgCrowbar to serialize the SVG

   var uri = svgCrowbar(eGraph);
   

2. Write the serialized SVG to a PNG dataURI using canvas

   // 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. Use jsPDF.addImage() to embed that PNG into the PDF

Using this method I was able to embed multiple dynamically generated SVGs into a single PDF. I'm not 100% happy with the outcome as the images on the PDF look distorted, but it might be that I need to do more tweaking of the jsPDF settings to get everything to look crisp.

这篇关于如何使用javascript在JSPDF中将SVG文件转换为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！