URL地址自定义文件名并下载

精选原创

三线码工 2024-08-18 14:54:07 ©著作权

©著作权归作者所有：来自51CTO博客作者三线码工的原创作品，请联系作者获取转载授权，否则将追究法律责任

在Web应用中，有时我们需要让用户能够下载文件，并且希望用户能够看到有意义的文件名而不是默认的、可能难以理解的名字。例如，在一个业务系统中，当用户点击“导出”按钮时，我们可以生成一个带有时间戳的文件名，这样用户就能清楚地知道文件是什么时候创建的。

方法一：使用`window.open`下载文件

这种方法较为简单，但通常无法直接控制文件名。大多数情况下，浏览器会根据服务器提供的信息或文件的实际内容来决定下载文件的名称。

方法二：使用`Blob`对象和`URL.createObjectURL`

这种方法允许我们创建一个临时的URL，指向内存中的文件，从而让我们能够完全控制文件的内容和文件名。

下面是一个具体的示例，展示了如何使用Vue.js结合上述第二种方法实现文件下载，并自定义文件名。

<template>
  <div>
    <button @click="handleConfirm">导出Excel</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncFile: null, // 这里应该包含文件的URL或者Blob
    };
  },
  methods: {
    generateTimestamp() {
      const now = new Date();
      const year = now.getFullYear().toString();
      const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `六粮液检验报告_${year}${month}${day}${hours}${minutes}${seconds}`;
    },
    handleConfirm() {
      if (!this.asyncFile) {
        console.error('文件URL未设置');
        return;
      }

      // 创建一个 Blob 对象
      fetch(this.asyncFile)
        .then((response) => response.blob())
        .then((blob) => {
          // 创建一个临时的 Blob URL
          const url = URL.createObjectURL(blob);

          // 创建一个隐藏的可点击链接
          const link = document.createElement('a');
          link.href = url;

          // 生成带有时间戳的文件名
          const timestamp = this.generateTimestamp();
          link.download = `${timestamp}.xlsx`;

          // 触发点击事件以下载文件
          link.click();

          // 清理临时 URL
          setTimeout(() => URL.revokeObjectURL(url), 0);
        })
        .catch((error) => {
          console.error('文件下载失败', error);
        });
    },
  },
};
</script>