Speichern von Blob in Datei nur in Javascript

Question

Wir haben derzeit eine sehr ineffektive Art, Visitenkarten zu erstellen. Ein Designer macht sie 1 in 1 in Illustrator, die überhaupt nicht effizient ist.

Also meine Idee war, 1 Vorlage in Illustrator zu machen, exportieren Sie es als Svg und bauen Sie ein einfaches Web-Tool, wo Menschen die Svg bearbeiten und den richtigen Namen, Berufsbezeichnung und Telefonnummer in sich setzen können.

Ich habe es geschafft, einen grundlegenden Editor zu erstellen, wo ich in einer Svg-Version unserer Visitenkarte laden und dann Text wie Name und Job-Titel durch Daten aus Eingabefeldern ersetzen. Aber ich kann nicht herausfinden, wie man den Blob speichert, der die neue SVG-Datei hält. Ich bekomme es in einem neuen Fenster zu öffnen (Adresse ist so etwas wie Blob: null/a0b8 ...). Aber jetzt bin ich völlig stecken, die Blob als Svg mit den aktualisierten Visitenkarten Informationen gespeichert.

Ich habe viele Beispiele ausprobiert, die ich mit Google gefunden habe, aber mein begrenzter Wissensstand dazu hat mir nicht geholfen, sinnvolle Beispiele zu geben.

Irgendwelche Ideen, wie ich das tun kann? Die einzige Einschränkung, die ich habe, ist, dass ich Backend-Tools nicht verwenden kann. Es muss in Front-End-Technologie sein.

function changeSVGdata() { 
 
       var nameValue = document.getElementById("name").value; 
 
       var phoneNumberValue = document.getElementById("phoneNumber").value; 
 
       var nameElement = document.getElementsByClassName("cls-2"); 
 
       var phoneNumberElement = document.getElementsByClassName("cls-1") 
 
       nameElement[0].textContent = nameValue; 
 
       phoneNumberElement[0].textContent = phoneNumberValue; 
 
      } 
 
      
 
      
 
      function saveNewCard() { 
 
       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); 
 
       window.URL.revokeObjectURL(url); 
 
       var svg_win = window.open(url, "svg_win"); 
 
      }

<h1>Business Card Generator</h1> 
 
     Name: <input type="text" name="nameTag" id="name"><br> 
 
     Phone Number: <input type="text" name="phonenr" id="phoneNumber"><br><br> 
 
     <button onclick="changeSVGdata()">Make Business Card</button> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <div 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"> 
 
      <defs> 
 
      <style> 
 
      .cls-1 { 
 
      font-size: 14px; 
 
      } 
 

 
      .cls-1, .cls-2 { 
 
      fill: #232323; 
 
      font-family: ArialMT, Arial; 
 
      } 
 

 
      .cls-2 { 
 
      font-size: 21px; 
 
      } 
 

 
      .cls-3 { 
 
      fill: none; 
 
      stroke: #232323; 
 
      stroke-miterlimit: 10; 
 
      stroke-width: 1px; 
 
      } 
 
      </style> 
 
      </defs> 
 
      <title>business card</title> 
 
      <text class="cls-1" transform="translate(39 78.75)">0612345678</text> 
 
      <text class="cls-2" transform="translate(38 52.75)">Donald Duck</text> 
 
      <rect class="cls-3" x="1" y="1" width="240.94" height="155.91"/> 
 
      </svg> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <button onclick="saveNewCard()">Save Business Card</button>

Answer 1

Sie können download der Anker verwenden Attribut, Ihre Taste, um dies zu ändern:

Hinweis zog ich die Onclick auf den Anker und hat einen neuen Parameter an die Funktion, this ist die aktuelles Element (<a>), wir senden es als Parameter zu saveNewCard Funktion.

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

Und Ihre Funktion dazu:

function saveNewCard(anchor) { 
//     ^anchor contains the reference to the <a> element 
    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); 

    anchor.href = url; 
    anchor.download = fileName; 
} 

Dies wird die href zur Blob-URL und den Download-Attribut auf den gewünschten Dateinamen ein.

Konzept Demo: https://codepen.io/emed/pen/MOjqMM/?editors=1010