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

Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

本文关键字：然后 文件下载 文本 Blob 元素 HTML 数据 Javascript 创建 使用      更新时间：2023-09-26

我使用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

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

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

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属性的值是要下载的文件名，Blob的构造函数是Blob(array, options)。

我使用了这种不涉及创建元素的方法，并在浏览器显示文本文件后撤销textFile

var text = 'hello blob';
var blob = new Blob([text], { type: 'text/plain' });
let textFile = window.URL.createObjectURL(blob);
let window2 = window.open(textFile, 'log.' + new Date() + '.txt');
window2.onload = e => window.URL.revokeObjectURL(textFile);
相关文章：