前端js实现文件下载

自定义下载数据

<!DOCTYPE html>
<html>
  <body>
    <h2>Download File</h2>
    <button onclick="Download()">下载</button>
  </body>
  <script>
    function Download() {
      var data = "Hello, World!";
      // 创建一个Blob对象
      var blob = new Blob([data], { type: "text/plain" });
      // 创建一个可以访问这个blob的url
      var url = URL.createObjectURL(blob);
      // 创建一个a标签
      var a = document.createElement("a");
      // 设置a标签的href和download属性
      // 如果是已有的文件直接替换URL就可以了
      a.href = url;
      a.download = "test.txt";
      // 触发a标签的click事件来下载文件
      a.click();
    }
  </script>
</html>

这是一个简单的HTML页面，它包含一个按钮和一个JavaScript函数。当用户点击按钮时，将触发 Download 函数，该函数会下载一个包含 "Hello, World!" 的文本文件。

以下是代码的详细解释：

•

HTML部分：

<h2>Download File</h2>：定义了一个标题，告诉用户这个页面的功能是下载文件。

<button onclick="Download()">下载</button>：创建了一个按钮，当用户点击这个按钮时，会执行 Download 函数。

•

JavaScript部分：

function Download() { ... }：定义了一个名为 Download 的函数，当用户点击按钮时，这个函数会被调用。

var data = "Hello, World!";：创建了一个变量 data，并将其设置为字符串 "Hello, World!"。这就是我们要下载的文件的内容。

var blob = new Blob([data], { type: "text/plain" });：使用Blob API创建了一个新的Blob对象，其中包含了我们的数据（在这个例子中是一个字符串）。我们还指定了MIME类型为"text/plain"，这意味着这是一个纯文本文件。

var url = URL.createObjectURL(blob);：使用URL.createObjectURL方法创建了一个指向这个Blob对象的URL。这样我们就可以像访问普通URL一样访问这个文件了。

var a = document.createElement("a");：创建了一个新的元素，这将用于创建一个可以被用户点击的下载链接。

a.href = url;：将我们之前创建的URL赋值给新创建的元素的href属性。这样元素就指向了我们的文件。

a.download = "test.txt";：设置了元素的download属性为"test.txt"。这将告诉浏览器我们希望用户下载的文件名是"test.txt"。

a.click();：最后，我们模拟触发元素的click事件，这将导致浏览器开始下载文件。

已有文件URL下载

function Download() {
  var url = "https://example.com/test.txt"; // 替换为你的文件URL
  var a = document.createElement("a");
  a.href = url;
  a.download = "test.txt";
  a.click();
}

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

自定义下载数据

已有文件URL下载

读者评论