Ich habe eine Webseite, die ein dynamisch erzeugtes SVG-Dokument ist. Javascript-Routinen bauen grundsätzlich das DOM des SVG auf. Der Leser kann das Dokument manipulieren, indem er auf verschiedene "Knöpfe" oder Objekte klickt, die das sVG verändern. (Es gibt jedoch keine Animation)
Ich möchte, dass der Leser ein großformatiges, hochauflösendes Bild des Dokuments ausdrucken kann. Wie kann ich das tun?
Normalerweise wird das Dokument skaliert und auf den Bildschirm zugeschnitten. Ich könnte ein riesiges Bild erzeugen, aber dann würde der Browser es schneiden.
Um eine Vorstellung davon zu bekommen, was ich unter einer hohen Auflösung verstehe, ist das Bildschirmbild typischerweise 89 Pixel pro Zoll und vielleicht 11 x 16 "oder so. Ein großformatiges Diagramm kann leicht 600 Pixel pro Zoll auf Papier mit 36 Zoll sein Ich kann mir nicht vorstellen, wie man einen solchen Ausdruck erzeugt.
Gibt es eine Möglichkeit, ein Status-SVG-Markup-Dokument aus dem dynamisch generierten DOM zu generieren? Wenn ja, könnte ich das statische SVG in PDF umwandeln und dann das PDF ausdrucken.
Sie sollten in der Lage sein, Ihr SVG im modifizierten Zustand mit XMLSerializer zu konvertieren und zuzulassen Benutzer, um dieses SVG-Dokument direkt mit ihrem Browser zu öffnen oder zu speichern.
Der Browser sollte dann einen hochwertigen Druck von der Svg.
bereitstellenWir haben eine App mit der gleichen Situation. Das SVG wird in einem Frame in unserer Java App erstellt und bearbeitet. Aber alle SVG-Manipulation geschieht in Javascript. Was wir tun, um zu drucken, ist eine Schleife durch das SVG-Tag und eine Datei zu erstellen, die nur die SVG enthält, die in einem Browser geöffnet wird. Benennen Sie die Datei FileName.svg und füttern Sie sie an den Browser. Dann können Sie den Browser zum Drucken verwenden.
Hier ist das Format der zu erstellenden Datei.
%Vor%Hier sind einige Code-Snips, die helfen sollen.
%Vor%Wenn Sie feststellen, dass es für einen Ausdruck größer sein muss, sollten Sie es in eine Gruppe einfügen und dann eine Skalierung in die Gruppe einfügen. Auf diese Weise können Sie es 2 3 oder 4 Mal größer machen. So etwas.
%Vor%Aber wie für uns ist, was im Browser in 8 "x 8" angezeigt wird, wird auf einem C-Blatt gut gedruckt. Ich nehme an, dass es die Natur von SVG ist. Wie Sie bereits erwähnt haben, können Sie auch die PDF-Route ausprobieren, da PDF das SVG als skalierbar behandelt. Wir verwenden Apache Batik für den PDF-Export, da unsere App Java ist. Viel Glück.
Die beste Implementierung, die ich beim Exportieren eines dynamisch erstellten SVG-Elements gesehen habe, ist die SVG-Crowbar 2 , die von der New York Times-Team. Was es besonders nützlich macht, ist, dass es die externen CSS-Regeln abruft, die auf das SVG-Element angewendet werden.
Was ich in Ihrem Fall tun würde, ist, installieren Sie Crowbar in Ihrem Browser und sehen Sie, wie die exportierte Svg-Datei aussieht. Wenn es gut aussieht, können Sie einen Code schreiben, der
XMLSerializer , um eine Zeichenfolge dieses kopierten svg-Elements btoa oder solchem form an den Server.
image/svg+xml und Content-Disposition: attachment; filename=yourfile.svg . Sie können auch versuchen, die Datei ohne einen Umlauf zum Server zu speichern, aber die Browserunterstützung variiert für diese Methoden.
Tags und Links javascript printing svg high-resolution