如何使用jQuery将内联数据下载为文件？

核心思路 #

通过前端构造文件内容，利用Blob对象封装文本数据，再通过URL.createObjectURL生成临时下载链接，最后触发点击动作完成下载，全程无需服务器存储实际文件。

实现步骤及代码 #

1. 页面结构示例

假设活动列表的每个项包含展示内容和下载按钮，同时把活动数据存储在元素的data-*属性中（也可以用隐藏DOM元素存储）：

<div class="event-item">
  <h3>香肠派对活动</h3>
  <p>日期：2024年7月</p>
  <!-- 用data属性存储完整活动数据 -->
  <button class="download-event" 
          data-filename="sausage-party.txt"
          data-content="Home: Sausages
Date: July 2024
Purpose: Stack!
Author: The Capt'n. ">
    下载活动数据
  </button>
</div>

<div class="event-item">
  <h3>另一个活动</h3>
  <p>日期：2024年8月</p>
  <button class="download-event" 
          data-filename="another-event.txt"
          data-content="Home: Bakery
Date: August 2024
Purpose: Bake!
Author: Chef. ">
    下载活动数据
  </button>
</div>

2. jQuery实现下载逻辑

$(document).ready(function() {
  // 绑定所有下载按钮的点击事件
  $('.download-event').on('click', function() {
    // 获取当前按钮对应的文件名和内容
    const filename = $(this).data('filename');
    const content = $(this).data('content');
    
    // 构造Blob对象，指定文本类型为txt
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    // 生成临时下载链接
    const downloadUrl = URL.createObjectURL(blob);
    
    // 创建临时a标签触发下载
    const $link = $('<a>')
      .attr('href', downloadUrl)
      .attr('download', filename)
      .appendTo('body');
    
    // 触发点击下载
    $link[0].click();
    
    // 清理资源：移除临时标签，释放URL对象
    $link.remove();
    URL.revokeObjectURL(downloadUrl);
  });
});

补充说明 #

• 如果活动数据需要从后端接口异步获取（比如点击时再请求数据库数据），可以把接口请求逻辑放在点击事件内，拿到数据后再执行后续Blob和下载步骤。
• 相比data URI方式，Blob更适合处理较大的文本内容，避免URI长度限制问题。
• 确保文本内容中的换行符\n正确，下载后的txt文件会保持排版格式。

内容的提问来源于stack exchange，提问作者Mm-Art-In