使用HTML元素中的数据创建Javascript Blob（）。然后将其下载为文本文件

Question

我正在使用HTML5网站来在textarea元素内创建一个逐条记录的日志。我需要单击一个按钮从该区域中提取数据，然后通过.txt文件将其下载到我的计算机中。如果可能的话，我将如何去做？

HTML：

<input type="button" onclick="newBlob()" value="Clear and Export">

Javascript：

function newBlob() {
    var blobData = document.getElementById("ticketlog").value;
    var myBlob = new Blob(blobData, "plain/text");
    blobURL = URL.createObjectURL(myBlob);
    var href = document.createElement("a");
    href.href = blobURL;
    href.download = myBlob;
    href.id = "download"
    document.getElementById("download").click();
}

我认为如果我制作了Blob，为其创建了一个URL，然后将该URL映射到“ a”元素，然后自动单击它，那么它在理论上应该可以正常工作。显然，我虽然错过了一些东西。任何帮助都将是极好的。该网站上的第一个问题btw：p

Answer 1

我想出的最简单的方法如下：

function download(text, filename){
  var blob = new Blob([text], {type: "text/plain"});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
}

download("this is the file", "text.txt");

可能的文件blob类型列表：http ://www.freeformatter.com/mime-types-list.html

Answer 2

const downloadBlobAsFile = (function closure_shell() {
    const a = document.createElement("a");
    return function downloadBlobAsFile(blob, filename) {
        const object_URL = URL.createObjectURL(blob);
        a.href = object_URL;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(object_URL);
    };
})();


document.getElementById("theButton").addEventListener("click", _ => {
    downloadBlobAsFile(new Blob(
        [document.getElementById("ticketlog").value],
        {type: "text/plain"}
    ), "result.txt");
});

a的值download属性的的<a>元素是下载的文件的名称，和的构造BlobISBlob(array, options)。