前端js下载文件方式记录

方式一: 前端组装数据进行下载

如下方式:

// 创建数据
var data = "Hello, world!";

// 将数据转换为 Blob 对象
var blob = new Blob([data], {type: "text/plain;charset=utf-8"});

// 创建一个 URL 对象，指向 Blob 对象
var url = URL.createObjectURL(blob);

// 创建一个下载链接
var downloadLink = document.createElement("a");
downloadLink.href = url;
downloadLink.download = "data.txt"; // 指定下载的文件名

// 模拟点击下载链接
document.body.appendChild(downloadLink);
downloadLink.click();

// 移除下载链接
document.body.removeChild(downloadLink);

其他文件类型下载的方式如下: Excel类型

1. 创建一个包含数据的二维数组。
2. 使用Blob对象将数据转换为二进制数据。
3. 使用URL.createObjectURL()方法创建一个指向该Blob对象的URL。
4. 创建一个隐藏的元素，并将其href属性设置为Blob对象的URL。
5. 设置元素的download属性为要下载的文件名。
6. 模拟点击元素以开始下载。

• 下载完成后，释放Blob对象的URL

// 创建数据
var data = [
  ["Name", "Age", "Gender"],
  ["John", 28, "Male"],
  ["Jane", 32, "Female"]
];

// 将数据转换为 Blob 对象
var blob = new Blob(
  [data],
  {type: "application/vnd.ms-excel;charset=utf-8"}
);

// 创建一个 URL 对象，指向 Blob 对象
var url = URL.createObjectURL(blob);

// 创建一个隐藏的 <a> 元素，并将其 href 属性设置为 Blob 对象的 URL
var downloadLink = document.createElement("a");
downloadLink.href = url;
downloadLink.download = "data.xlsx"; // 指定下载的文件名
downloadLink.style.display = "none";

// 将 <a> 元素添加到文档中
document.body.appendChild(downloadLink);

// 模拟点击 <a> 元素以开始下载
downloadLink.click();

// 下载完成后，释放 Blob 对象的 URL
URL.revokeObjectURL(url);

// 从文档中移除 <a> 元素
document.body.removeChild(downloadLink);