本文介绍了如何使用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）;
//保存PDF
doc.output（'datauri'）;
}）;
我从这个。其结果只是空白PDF 。当我 console.log（doc）在输出之前会显示results.But它不会导致 PDF ...
我也是从这个，我也在这段代码中工作。
//我建议保持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中解决这个问题 解决方案
至： 使用来序列化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:
Use svgCrowbar to serialize the SVG
var uri = svgCrowbar(eGraph);
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;
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
