将Blob保存到文件中

Question

我们目前制作名片的效率很低。设计师在插图画家中以1到1的比例进行处理，这根本没有效率。

所以我的想法是在illustrator中制作一个模板，将其导出为svg，并构建一个简单的网络工具，人们可以在其中编辑svg，并在其中输入正确的姓名，职务和电话号码。

我设法制作了一个基本的编辑器，在其中加载了名片的svg版本，然后用输入字段中的数据替换名称和职称之类的文本。但是我不知道如何保存包含新的svg文件的blob。我得到它以在新窗口中打开它（地址类似于blob：null / a0b8 ...）。但是现在我完全陷入了使用更新的名片信息将斑点保存为svg的问题。

我尝试了很多在google上发现的示例，但是我对此的有限了解并没有帮助我理解示例。

任何想法我该怎么做？我唯一的限制是我不能使用后端工具。它必须是前端技术。

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>

我们目前制作名片的效率很低。设计师在插图画家中一一完成它们，这根本没有效率。所以我的想法是在Illustrator中制作1个模板，然后将其导出...

Answer 1

您可以使用锚点的download属性，将按钮更改为此：