如何在HTML中添加自定义下载按钮实现指定内容下载？

直接用以下代码就能完成需求，点击按钮即可把变量x的值下载为anyname.txt：

<button onclick="downloadText()">下载文本</button>

<script>
var x = 'demo';

function downloadText() {
  // 将文本内容转为Blob对象
  const textBlob = new Blob([x], { type: 'text/plain' });
  // 生成临时下载URL
  const downloadUrl = URL.createObjectURL(textBlob);
  // 创建临时a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'anyname.txt';
  // 插入页面并触发点击
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理临时元素和URL资源
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}
</script>

关键逻辑说明 #

• 借助Blob对象把字符串内容转换成浏览器可识别的文本二进制资源
• 用URL.createObjectURL生成临时的下载链接，避免直接处理文件路径
• 通过创建临时<a>标签并模拟点击，利用浏览器的下载机制完成文件保存
• 最后清理临时元素和URL，防止内存占用

内容的提问来源于stack exchange，提问作者Gunnu Mittal