it-roy-ru.com

Как мне легко создать PDF из SVG с jsPDF?

Я пытаюсь создать PDF, но у меня есть несколько изображений SVG. Я нашел информацию об этой проблеме, но мне просто нужно использовать JavaScript, то есть нет jQuery.

Я нашел jsPDF здесь: https://github.com/MrRio/jsPDF

Существует плагин jspdf.plugin.sillysvgrenderer.js (в той же папке), где мы можем найти пример PDF, созданного в папке test.

Но когда я пытаюсь сгенерировать PDF самостоятельно, это не работает, и я не понимаю, почему.

Ты знаешь как это сделать? 

9
azn0viet

Я получил этот плагин, работающий, но только с SVG-файлом из тестов, и я видел в документе, что поддерживаются только PATHs :(

Уже есть проблема на github https://github.com/MrRio/jsPDF/issues/384

Если пути в порядке, вот мой код (это более или менее код из тестов):

function demoSvgDocument() {
    var doc = new jsPDF();
    var test = $.get('013_sillysvgrenderer.svg', function(svgText){
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)

        // Save the PDF
        doc.save('TestSVG.pdf');
    });
}       

Еще один момент, который нужно учитывать, вы должны запустить все примеры на сервере. В противном случае вы не увидите никаких результатов, вероятно, из-за безопасности

3
Tima

Попробуйте canvg, чтобы конвертировать SVG в Canvas. Затем преобразуйте холст в строку base64 с помощью .toDataURL()

Более подробный ответ здесь https://stackoverflow.com/a/35788928/2090459

Проверьте демо здесь http://jsfiddle.net/Purushoth/hvs91vpq/

Canvg Repo: https://github.com/gabelerner/canvg

3
Purushoth

Я изменил это из: https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e

var yourSVG = document.getElementsByTagName('svg')[0];
//or use document.getElementById('yourSvgId'); etc.

yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var serializer = new XMLSerializer();
var serialSVG = serializer.serializeToString(yourSVG);

var svg = serialSVG;

var blob = new Blob([svg], {type: 'image/svg+xml'}); 
var url = URL.createObjectURL(blob);
var image = document.createElement('img');

// image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});    
//changed above line using babel to code below;

image.addEventListener('load', function () {
    return URL.revokeObjectURL(url);
    }, { once: true });

image.src = url;

//Then just use your pdf.addImage() function as usual;
1
Mr. J

Вы можете использовать плагин Canvas, который поставляется с jsPDF, для рендеринга SVG в PDF с помощью canvg. Мне пришлось установить несколько фиктивных свойств в реализации холста jsPDF и отключить интерактивные/анимационные функции canvg, чтобы это работало без ошибок:

var jsPdfDoc = new jsPDF({
    // ... options ...
});

// ... whatever ...

// hack to make the jspdf canvas work with canvg
jsPdfDoc.canvas.childNodes = {}; 
jsPdfDoc.context2d.canvas = jsPdfDoc.canvas;
jsPdfDoc.context2d.font = undefined;

// use the canvg render the SVG onto the 
// PDF via the jsPDF canvas plugin.
canvg(jsPdfDoc.canvas, svgSource, {
    ignoreMouse: true,
    ignoreAnimation: true,
    ignoreDimensions: true,
    ignoreClear: true
});

Это кажется мне гораздо лучшим решением, чем плагин SVG для jsPDF, так как canvg имеет гораздо лучшую поддержку функций SVG. Обратите внимание, что свойства width и height должны быть установлены в элементе <svg/> вашего SVG-файла, чтобы canvg мог правильно его отобразить (или, по крайней мере, так мне показалось).

1
Yuval

Там сейчас находится svg2pdf.js , который использует форк из jsPDF. Он был создан для решения именно этой задачи: экспорт SVG в PDF.

Кроме того, в jsPDF также добавлена ​​демонстрация, в которой показано, как можно экспортировать SVG с помощью canvg и реализации холста jsPDF

Оба решения имеют свои преимущества и недостатки, поэтому вы можете попробовать оба и посмотреть, подходит ли одно из них вашим потребностям.

1
Sebastian