在点击带有DOM内容的Javascript按钮时触发文件下载

Trigger a file download on click of button Javascript with contents from DOM

本文关键字：按钮 Javascript 文件下载 DOM      更新时间：2023-09-26

我想下载一个从DOM元素创建的文件。所以用户点击网页上的一个按钮，它调用一个javascript方法，可以抓取DOM元素的内容，并提示用户下载。

我能够在Javascript Var中抓取DOM元素的内容，但不确定如何进一步进行。

对于抓取DOM元素，我使用:

var elem = document.getElementById("userDownload");

我不确定我是否正确理解什么是您试图下载的内容。如果将内容(听起来像元素的HTML ?)存储在变量中，可以尝试:

("#downloadbutton").click(function() {
  //var content = content of file;
  var dl = document.createElement('a');
  dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
  dl.setAttribute('download', 'filename.txt');
  dl.click();
});

我很高兴找到这个问题，但至少在运行linux的Firefox上，您需要将dl元素附加到文档中以使单击功能工作。我还没有在其他浏览器上广泛测试这有多必要，但至少在某些浏览器上是必要的，所以我建议进行以下修改:

var content = document.getElementById("elem").innerHTML;
var dl = document.createElement('a');
dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
dl.setAttribute('download', 'filename.txt');
// Set hidden so the element doesn't disrupt your page
dl.setAttribute('visibility', 'hidden');
dl.setAttribute('display', 'none');
// Append to page
document.body.appendChild(dl);
// Now you can trigger the click
dl.click();

我明白了:我必须这样做

function myAlert(){
    var content = document.getElementById("elem").innerHTML;
    var dl = document.createElement('a');
    dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
    dl.setAttribute('download', 'filename.txt');
    dl.click();
}
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('alertButton').addEventListener('click', myAlert);
});
相关文章：