blob data opslaan in bestand met html en javascript.

[MenN]

Ik ben bezig om een simpele visitekaart editor te maken, waarbij de designer een svg ontwerp aanlevert en waar ik daarna via javascrtipt en html een simpele interface gemaakt heb waar je de naam, telefoon nummber en job title kan aanpassen via simpele html input velden.

Hoe ik het aanpak is gewoon javascript de waarden van bepaalde classes laat aanpassen en vervolgens het svg element als blob maak welke ik dan weg wil schrijven als een svg bestand.

Het editen van de svg en het maken van de blob gaan prima. Maar bij wat ik ook probeer, de blob open zich altijd als file in een niew venster. Maar dat wil ik niet, het moet als .svg in je downloads folder komen.

De blob in het nieuwe window is een keurig svg'tje met de nieuwe data, maar ik krijg het gwoon niet voor elkaar om die vervolgens weg te schrijven als bestand. Heb al erg veel dingen geprobeerd, maar ik mis gewoon een kleine stap volgens mij.

code kunnen jullie in deze jsFiddle zien:
https://jsfiddle.net/tcbabzoL/

Enig idee hoe ik zo iets voor elkaar kan krijgen? Liefst gewoon in javascript zonder extra libaries als jquery ect.

[RobIII]

Vreemd. Als ik zoek op createObjectURL download file kom ik allerlei relevants tegen zoals dit. Ik neem aan dat je, per onze Quickstart, zelf ook het e.e.a. gezocht en geprobeerd hebt?

MenN schreef op woensdag 8 november 2017 @ 10:08:
Heb al erg veel dingen geprobeerd

Geef dan voortaan aan wat dan; dan hoeft niemand zijn/haar tijd te verdoen met aandragen van dingen die je al geprobeerd hebt.

[ Voor 27% gewijzigd door RobIII op 08-11-2017 10:27 ]

[MenN]

Zoals je kunt zien in de JSFiddle is dat ik inderdaad de createObjectURL methode gebruik en netzoals in je voorbeeld dit via een link probeer weg te schrijven naar een file, middels ongeveer de zelfde methode.

JavaScript:

 
                var fileName = "Business Card - " + document.getElementById("name").value + ".svg"; 
                var svg = document.getElementById("svg");
                var serializer = new XMLSerializer();
                var svg_blob = new Blob([serializer.serializeToString(svg)],{'type': "image/svg+xml"});
                var url = URL.createObjectURL(svg_blob);
               
                alert(url);
                alert(fileName);
                var buttonHref = document.getElementById("saveButton");
                buttonHref.href = url;
                
                alert(saveFunction.href);
                
                buttonHref.download = fileName;
  

HTML:

<a href="#saveFunction" onclick="saveNewCard(this)" id="saveButton">
            <button>Save Business Card</button>
</a>

Maar helaas blijft chrome en firefox de svg in een niewe webpagina laden in plaats van het als bestand te downloaden. Ik heb gebrobeerd om FileSaver.js te implementeren welke de volgende syntax heeft:

FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM)

JavaScript:

 

                var fileName = "vidaXl Business Card - " + document.getElementById("name").value + ".svg"; 
                var svg = document.getElementById("svg");
                var serializer = new XMLSerializer();
                var svg_blob = new Blob([serializer.serializeToString(svg)],{'type': "image/svg+xml"});
                var url = URL.createObjectURL(svg_blob);
                saveAs(svg_blob, fileName);

Maar ook met deze libary wil het niet lukken, er wordt gewoon niets opgeslagen. Wat er verder nog mogelijk is, dat weet ik dus niet en dan zijn alle hints, opmerkingen en comments welkom.

[ Voor 6% gewijzigd door MenN op 08-11-2017 10:53 ]

[Harrie_]

Ik denk dat het probleem in je headers zit. De 'download' wordt nu clientside afgehandeld waarbij Chrome/Firefox de beslissing maakt dat een .svg in de browser kan worden getoond. Je zult dus een header mee moeten geven die de client aangeeft dat het bestand gedownload moet worden. Hoe je dit in JS oplost ben ik ook niet helemaal bekend mee...

code:

header('Content-Disposition: attachment');

Voor zover ik weet werkt 'forced download' in Chrome en Firefox ook als je de <a> tag op deze manier gebruikt:

HTML:

<a href="bestand.svg" download="bestand.svg">Download het SVG-bestand</a>

Ik weet niet in hoeverre dit ook IE compatible is...

[Merethil]

@MenN Probeer het eens door target="_blank" toe te voegen aan je "save"-knop. Ah op localhost werkt 't bij mij zonder en met target. Weet niet wat er anders aan is dan in je JsFiddle aangezien ik 'm gewoon heb overgenomen en heb zitten prutsen, dus ik laat dit over aan mensen die wel weten wat ze doen

[ Voor 64% gewijzigd door Merethil op 08-11-2017 12:15 ]

[RobIII]

MenN schreef op woensdag 8 november 2017 @ 10:48:
Zoals je kunt zien in de JSFiddle is dat ik inderdaad de createObjectURL methode gebruik en netzoals in je voorbeeld dit via een link probeer weg te schrijven naar een file, middels ongeveer de zelfde methode.

Met de nadruk op "ongeveer" en daar zit 'm net de crux: jij gebruikt image/svg+xml en dat is verkeerd als je wil dat de file 'gedownload' wordt. Je browser zal een image/svg+xml gewoon tonen (immers weet 'ie hoe 't te tonen/renderen). Als je een download wil forceren zul je octet/stream of application/octet-binary o.i.d. moeten gebruiken.

[ Voor 60% gewijzigd door RobIII op 08-11-2017 12:15 ]

[MenN]

RobIII schreef op woensdag 8 november 2017 @ 12:10:
[...]

Met de nadruk op "ongeveer" en daar zit 'm net de crux: jij gebruikt image/svg+xml en dat is verkeerd als je wil dat de file 'gedownload' wordt. Je browser zal een image/svg+xml gewoon tonen (immers weet 'ie hoe 't te tonen/renderen). Als je een download wil forceren zul je octet/stream of application/octet-binary o.i.d. moeten gebruiken.

Ah thx, dat was de fout. Ik was in de veronderstelling dat die mimetype echt nodig was om een fatsoenlijk svg'tje te maken. Maar volgens modzilla is het definiëren van de mime-type optioneel en toen ik dit weggelaten heb werkte het downloaden wel.

Ik zit nu alleen nog met 1 klein probleempje, ik haal nu de div op met de getElementByID, en deze stop ik in de blob.

JavaScript:

var svgDiv = document.getElementsByTagName("svg");
 var svg = svgDiv.toString();
console.log(svg);
 var serializer = new XMLSerializer();
var svg_blob = new Blob([serializer.serializeToString(svg)]);

Maar de output is dan:

JavaScript:

<div xmlns="http://www.w3.org/1999/xhtml" id="svg">         
             <svg id="Business_Card" data-name="Business Card" xmlns="http://www.w3.org/2000/svg" width="85.71mm" height="55.71mm" viewBox="0 0 242.94 157.91">
            .....svg spull....
            </svg>  
        </div>

Dit is logisch natuurlijk, aangezien ik de div opgeroepen heb waar de svg zich in bevind. Maar helaas resulteert dit dus niet in een goed svg bestand. Door handmatig de div tags te verwijderen maakte het svg bestand wel werkbaar.
Maar nu komt dus het probleem. Zodra ik probeer de data in die div probeer te verwerken loopt het spaak.

ik heb geprobeerd om de svg tag zelf te gebruiken

JavaScript:

var svgDiv = document.getElementsByTagName("svg");

of de innerhtml van de div te gebruiken

JavaScript:

var svgDiv = document.getElementById("svg");
var svg = svgDiv.innerHTML;

Maar bij beide probeersels krijg ik deze error in de console

code:

Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'

Het hele serializer deel overslaan is ook geen optie, dan staat in het gedownloade bestand.

code:

[object SVGSVGElement]

Dus iemand een idee hoe ik dit wel moet aanpakken?

[DJMaze]

MenN schreef op woensdag 8 november 2017 @ 13:46:
Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'

SVGSVGElement is wel degelijk een Node
"var svg" is daarentegen een String.
Logisch dat je een error krijgt.

Iets met getElementById("Business_Card") lijkt mij op zijn plaats...