使用来自 HTML 元素的数据创建 Javascript Blob()。然后将其下载为文本文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25734072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file
提问by J_Nerd
I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??
我正在使用 HTML5 站点在 textarea 元素中创建每个说的日志。我需要通过单击按钮从该区域提取数据，然后通过 .txt 文件将其下载到我的计算机。如果可能的话，我将如何去做？
HTML:
HTML：
<input type="button" onclick="newBlob()" value="Clear and Export">
Javascript:
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();
}
I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p
我想如果我制作 Blob，为它创建一个 URL，将 URL 映射到“a”元素然后自动单击它，那么理论上它应该可以工作。显然我错过了一些东西。任何帮助都会很棒。本网站的第一个问题顺便说一句：p
回答by spencer.sm
The simplest way I've come up with is as follows:
我想出的最简单的方法如下：
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");
List of possible blobfilestypes: http://www.freeformatter.com/mime-types-list.html
可能的文件blob类型列表：http://www.freeformatter.com/mime-types-list.html
回答by Константин Ван
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");
});
The value of a downloadpropertyof an <a>element is the name of the file to download, and the constructor of Blobis Blob(array, options).
a的值download属性的的<a>元素是下载的文件的名称，和的构造BlobISBlob(array, options)。
回答by Gustavo Ulises Arias Méndez
I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file
我使用了这种不涉及创建元素并在浏览器显示文本文件后撤销 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);
