Question

我在交易结束时在HTML页面上生成一些重要信息。

<html>
<head>
  <script type="text/javascript">
    function downloadReference(){
    }
  </script>
</head>
<body>
  <p>
  Hello! Thank you for your interest.
  </p>
  <table style="background-color:#ccffcc;border: 1px solid #00cc00" id="referencedata">
    <tr>
        <td><b>Interest Received Date:</b></td>
        <td>22 March 2018</td>
    </tr>
    <tr>
        <td><b>Confirmation Number:</b></td>
        <td>J4835K3344</td>
    </tr>
  </table>
  <br/>
  <a href="#" onclick="return downloadReference();" download="Reference.html">Download this info!</a>
</body>
</html>

现在，我想让用户选择下载此信息以供他参考。我不想在服务器端创建文件。

我知道在HTML5中我们可以在锚标记中给出下载属性以允许用户下载文件，但是如何动态生成内容而不是引用任何物理文件？

Answer 1

感谢@bloodyKnuckles的提示。为将来需要这个的人写答案。

我在我的锚标记中添加了id：

<a href="#" id="dl"...

然后，JavaScript函数：

function downloadReference(){
     var dl = document.getElementById ("dl");
     dl.href="data:text/plain," + document.getElementById("data").outerHTML;
     return true;
}

return true;是下载发生所必需的。

我们不支持IE等死机浏览器，所以不用担心。

Answer 2

你可以做这样的事情，这很简单。您需要在某个时刻将数据传递到数据网址。如果用JS渲染，我建议将数据传递给下面的例子中的函数，并使用监听器而不是onclick。否则，您可以将其编码为链接上的数据属性并以此方式传递。我很乐意更新以更好地解释。

function generateFile(dataurl, filename) {
  // create a hidden anchor
  var link = document.createElement("a");
  link.href = dataurl; 
  link.setAttribute("download", filename); 
  // programatically click dynamic anchor
  var mouse = document.createEvent("MouseEvents");
  mouse.initEvent("click", false, true);
  link.dispatchEvent(mouse);
  return false;
}

document.getElementById('download').onclick = function() {
  generateFile("data:text/html, <h1>Your HTML</h1>", "reference.html");
}

从Html页面下载表格内容（字符串），无需物理文件

2 个答案: