将 blob 保存到文件

Question

我们目前制作名片的方式非常低效。 设计师在 illustrator 中一个一个地做，这根本没有效率。

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

我设法制作了一个基本编辑器，在其中加载了 svg 版本的名片，然后用输入字段中的数据替换姓名和职位等文本。但我不知道如何保存保存新 svg 文件的 blob。我让它在新窗口中打开它（地址类似于blob：null / a0b8 ...）。 但是现在我完全无法使用更新的名片信息将 blob 保存为 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>

Answer 1

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

请注意，我将 onclick 移至锚点并为您的函数添加了一个新参数，this 是当前元素 (<a>)，我们将其作为参数发送给 saveNewCard 函数。

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

你的功能是：

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;
}   

这会将 href 设置为 blob url，并将下载属性设置为您想要的文件名。

概念演示：https://codepen.io/emed/pen/MOjqMM/?editors=1010