Warum ist es schwierig, SVG zu PDF-Client-Seite zu konvertieren, ist nicht PDF-Vektor-Format?

Ich versuche, über Javascript eine Svg-Datei in eine PDF-Datei zu konvertieren. Ich dachte, es wäre einfach.Warum ist es schwierig, SVG zu PDF-Client-Seite zu konvertieren, ist nicht PDF-Vektor-Format?

Aber alles, was ich online gesehen habe rasterisiert die Svg und das resultierende PDF sieht verschwommen. Zum Beispiel:

http://ihaochi.com/svg_to_pdf/ (die SVG PNG konvertiert dann setzt es in ein PDF-Dokument über jspdf)

Aber sollte nicht pdf haben Vektor-Fähigkeiten? Dh ich möchte kein Bild in einem PDF. Ich möchte numerische Werte wie Svg funktioniert, weil es so besser druckt.

Quelle

2016-08-08 foreyez

Verwandte: https://stackoverflow.com/q/5913338 – Siguza

Wie wäre es http : //pdfkit.org/? Sieht aus wie es Text unterstützt. – yuriy636

Da Sie von einem speziellen Eingang zu einem speziellen Ausgang gehen, ist der Gewinn für das Schreiben eines solchen Werkzeugs begrenzt. – dandavis

Eigentlich ist PDF nicht ein "Vektor" -Format. Sein nächster technischer Verwandter ist "EPS = Encapsulated PostScript ®".

Ich würde nicht annehmen, dass PDF enthält Vektor-Zeichnung Primitiven, die erwartet werden würde, "eins zu eins" mit denen in SVG zuordnen.

Quelle

2016-08-08 21:41:58

https://en.wikipedia.org/wiki/Portable_Document_Format#Vector_graphics – Kaiido

Um zu verdeutlichen: "Die Vektor-Grafik-Fähigkeiten von PDF sind nicht unbedingt" direkt kompatibel "oder" eins zu eins konvertierbar "* gegenüber * die von SVG. " –

also kann ich ein eps in ein pdf? (und vielleicht könnte ich SVG in eps konvertieren?) – foreyez

Ich habe viele JavaScript-Bibliotheken getestet, die SVG in PDF für mein Web-Projekt einschließlich der oben genannten konvertieren, und erlebt immer wieder dasselbe, dass die PDF nur mit Bildschirmauflösung produziert wird. Schließlich habe ich mit css2pdf (http://www.cloudformatter.com/css2pdf) sehr gute Erfahrungen gemacht. Es verwendet eine kleine JavaScript-Bibliothek namens "XEPOnline javascript", um den Inhalt der SVG einschließlich des CSS-Stylings auf der Client-Seite zu extrahieren, und sendet diese Informationen an eine XEP-Rendering-Engine in der Amazon Cloud zur Generierung der PDF. Die Ausgabe pdf-Datei ist hochauflösendes, überprüfen Sie bitte mein Beispiel Geige, wo ich Plotly.js und C3.js svg Charts PDF-Export: http://jsfiddle.net/3hs7cs4f/10/

Hier ist der entsprechende Code an die Geige:

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Scrip /xeponline.jqplugin.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 

<script> 
function addnsandprint(){ 
$('#c3_chart').find('svg').attr('xmlns','http://www.w3.org/2000/svg'); 
xepOnline.Formatter.Format('c3_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'}); 
} 
</script> 

<body> 
<br><br> 
<!-- Source and on-click event for plotly.js --> 
<div id="plotly_chart" style="width: 90%; height: 270px"></div> 
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'});">Get plotly_PDF</button> 

<!-- Source and on-click event for c3.js--> 
<div id="c3_chart" style="width: 90%; height: 270px"></div> 
<button onclick="return addnsandprint()">Get c3_PDF</button> 

<!-- JAVASCRIPT for plotly.js chart --> 
<script type="text/javascript"> 
Chart = document.getElementById('plotly_chart'); 
Plotly.plot(Chart, [{ 
    x: [1, 2, 3, 4, 5], 
    y: [1, 2, 4, 8, 16] }], { 
    margin: { t: 0 } }); 
</script> 

<!-- JAVASCRIPT for j3.js chart --> 
<script type="text/javascript"> 
    var chart = c3.generate({ 
    bindto: '#c3_chart', 
    padding: { 
     top: 10, 
     right: 70, 
     bottom: 50, 
     left: 75, 
    }, 
    data: { 
     columns: [ 
      ['data1', 100, 200, 150, 300, 200], 
      ['data2', 400, 500, 250, 700, 300], 
     ] 
    }}); 
</script>

ich möchte immer alles läuft, Kevin Brown (https://stackoverflow.com/users/2491227/kevin-brown) für seine große Hilfe danken bitte auch einen Blick auf meine früheren Post SVG to PDF conversion working for Plotly.js but not for C3.js

Quelle

2017-07-05 17:35:12 schustischuster

Warum ist es schwierig, SVG zu PDF-Client-Seite zu konvertieren, ist nicht PDF-Vektor-Format?

Antwort

Verwandte Themen