jquery 如何将内联数据下载为文件

Question

假设我有一个包含大量事件的数据库驱动网站，每个事件都会加载并显示在列表页面上。

我想将每个事件的数据作为下载呈现（假设是一个

eventname.txt

文件），可以通过单击链接进行下载。文件数据来自数据库或页面上的内联元素，它不是资源文件媒体。

示例数据，说：

Home: Sausages
Date: July 2024
Purpose: Stack!
Author: The Capt'n. 

此数据需要在页面加载时由 Javascript 生成，并放入一个表单中，单击按钮/链接即可提供可供客户端下载的 event.txt 文件，但该文件在服务器上不存在。

如何使用 JQuery 做到这一点？

我想象类似的事情这个答案对一个模糊相关的问题。

  var link = document.createElement("a");
  var textdata = "Home: Sausages\nDate: July 2024\nPurpose: Stack!\nAuthor: The Capt'n.";
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;' + textdata
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

我已经寻找过其他问题，但我想我不知道正确的词语，因为我看不到任何真正有助于指导我的东西。

Answer 1

考虑类似：

$(function() {
  function readTableToObject(table) {
    var result = {};
    $("tbody > tr", table).each(function(i, row) {
      result[$("td", row).eq(0).text().trim()] = $("td", row).eq(1).text().trim()
    });
    return result;
  }

  function objectToText(obj, eol, enc) {
    if (obj == undefined) {
      return false;
    }
    if (eol == undefined) {
      eol = "\r\n";
    }
    if (enc == undefined) {
      enc = true;
    }
    var txt = "";
    $.each(obj, function(k, v) {
      txt += k + ": " + v + eol;
    });
    if (enc) {
      return encodeURI(txt);
    }
    return txt;
  }

  function downloadData(table) {
    console.log("Reading Data from Table: " + $(table).attr("id"));
    var myData = readTableToObject(table);
    var textData = objectToText(myData);
    var link = $("<a>", {
      href: 'data:application/octet-stream;charset=utf-8;' + textData,
      class: "download-link",
      download: $(table).attr("id") + ".txt"
    }).appendTo("body");
    link.trigger("click").remove();
  }

  $("button[id^='btn-']").click(function() {
    console.log($(this).attr("id") + " Clicked");
    var i = $(this).attr("id").slice(-2);
    downloadData($("#data-" + i));
  });

  $("body").on("click", ".download-link", function() {
    console.log("Download Link Clicked.", $(this).attr("href"));
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div>
  <table id="data-01">
    <thead>
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Home</td>
        <td>Sausages</td>
      </tr>
      <td>Date</td>
      <td>July 2024</td>
      </tr>
      <tr>
        <td>Purpose</td>
        <td>Stack!</td>
      </tr>
      <tr>
        <td>Author</td>
        <td>The Capt'n.</td>
      </tr>
    </tbody>
  </table>
  <button id="btn-01">Download Data</button>
</div>

可能不适用于所有浏览器。

参考：如何在Javascript中创建动态文件+下载链接？