返回

轻松get！Vue-Cli4前端下载本地Excel模板与静态文件的正确姿势

前端

轻松应对 Vue-Cli4 中下载本地 Excel 模板和静态文件的挑战

子标题 1: 下载本地 Excel 模板的原理

在 Vue-Cli4 中，下载本地 Excel 模板有两种基本方法：使用 <a> 标签或 window.open 方法。然而，使用 <a> 标签下载文本文件受限，而使用 window.open 方法可以下载任何类型的文件。

子标题 2: 使用 <a> 标签下载 Excel 模板

  1. 使用 FileReader 对象读取二进制文件。
  2. 使用 Blob 对象创建下载链接。
  3. 使用 <a> 标签下载文件。

代码示例：

// 使用FileReader对象读取二进制文件
const reader = new FileReader();
reader.onload = function() {
  // 使用Blob对象创建下载链接
  const blob = new Blob([reader.result], {type: "application/vnd.ms-excel"});
  const url = URL.createObjectURL(blob);

  // 使用a标签下载文件
  const a = document.createElement("a");
  a.href = url;
  a.download = "文件名称.xls";
  a.click();

  // 释放内存
  URL.revokeObjectURL(url);
};
reader.readAsBinaryString(file);

子标题 3: 使用 window.open 方法下载 Excel 模板

  1. 使用 window.open 方法打开一个新窗口。
  2. 在新窗口中设置文件下载的请求头。
  3. 发送文件下载请求。

代码示例：

// 使用window.open方法打开一个新的窗口
const newWindow = window.open("", "_blank");

// 在新窗口中设置文件下载的请求头
newWindow.document.open();
newWindow.document.write(`<html><head></head><body><a href="${url}" download="文件名称.xls"></a></body></html>`);
newWindow.document.close();

// 发送文件下载请求
const a = newWindow.document.getElementsByTagName("a")[0];
a.click();

// 关闭新窗口
newWindow.close();

子标题 4: 下载静态文件的原理

下载静态文件与下载 Excel 模板类似。我们可以使用 window.open 方法或第三方库，如 axios 或 fetch。

代码示例（使用 axios）：

import axios from "axios";

axios({
  url: url,
  method: "GET",
  responseType: "blob",
})
.then((response) => {
  const blob = new Blob([response.data], {type: response.headers['Content-Type']});
  const url = URL.createObjectURL(blob);

  // 使用a标签下载文件
  const a = document.createElement("a");
  a.href = url;
  a.download = "文件名称.png";
  a.click();

  // 释放内存
  URL.revokeObjectURL(url);
})
.catch((error) => {
  console.error(error);
});

结论

使用 Vue-Cli4 下载本地 Excel 模板和静态文件是常见的任务。了解基本原理和遵循本文提供的步骤，您可以轻松解决遇到的问题。

常见问题解答

  1. 为什么我无法使用 <a> 标签下载 Excel 模板？
    答：<a> 标签无法下载二进制文件，如 Excel 模板。您需要使用 window.open 方法或 FileReader 和 Blob 对象。
  2. 如何下载使用 window.open 方法下载的 Excel 模板？
    答：在打开的新窗口中单击下载链接。
  3. 我可以使用第三方库下载静态文件吗？
    答：是的，您可以使用 axios 或 fetch 等库下载静态文件。
  4. 下载过程失败怎么办？
    答：检查您的网络连接，确保 URL 正确，并查看控制台中是否有任何错误消息。
  5. 如何限制下载文件的大小？
    答：可以在 axios 请求中设置 maxContentLength 选项以限制文件大小。