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

Question

我想下载一个从DOM元素创建的文件.因此,用户单击网页上的按钮并调用javascript方法,该方法可以获取DOM元素的内容并提示用户下载.

我能够在Javascript Var中获取DOM元素的内容.但不确定如何进一步.

抓取我正在使用的DOM元素:

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

Answer 1

我不确定我是否正确理解您要下载的内容是什么.如果您有一个存储在变量中的内容(听起来像元素的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();
});

Answer 2

我很高兴发现这个问题，但至少在运行 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();