Question

我们目前制作商业卡的方式非常有效。设计师在插图画家中逐一完成它们，这根本没有效率。

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

我设法创建了一个基本编辑器，我在其中加载了svg版本的名片，然后用输入字段中的数据替换了名称和作业标题等文本。但我无法弄清楚如何保存持有新svg文件的blob。我得到它在一个新窗口中打开它（地址类似于blob：null / a0b8 ......）。但是现在我完全不知道将blob保存为带有更新的businesscard信息的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，并将download属性设置为所需的文件名。

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

仅在javascript中将blob保存到文件中

1 个答案: