js如何实现文件下载

Question

现在页面上有一个div内容和一个按钮

我需要实现一个功能, 就是点击按钮, 将div里的文本内容封装成.txt文件, 进行下载

应该如何实现?

<a href="data:text/paint; utf-8, Hello World" download="down.txt">下载</a>

这是已知的一种方法, 但是感觉不是很合理
还有没有其他方法也能实现文件下载的?

Answer 1

大概逻辑如下:

function down(txt, file) {
    let blob = new Blob([txt]);
    let url = window.URL.createObjectURL(blob);
    let dom = document.createElement('a');
    dom.setAttribute('href', url);
    dom.setAttribute('download', file);
    dom.click();
    URL.revokeObjectURL(url);
}

可以考虑使用file-saver处理

Answer 2

1. 点击事件会先于默认行为触发
2. 所以可以侦听点击事件，计算后，用 object URL 替换 href
3. 给 <a> 标签增加 download 属性

写成代码大概是：

<a href="文件名，用来显示在右下角" data-content="下载的内容，也可以不放在 dom 上" download="文件名">下载</a>

a.addEventListener('click', e => {
  const {content} = e.target.dataset;
  const blob = new Blob([content], 'text/plain');
  const url = URL.createObjectUrl(blob);
  e.target.href = url;
});