Vue 文件下载不再止于CV的深度总结

2024-02-14 08:25:53

文章正文

1. JavaScript 文件下载基础

在了解 Vue 文件下载之前，我们先来回顾一下 JavaScript 中的文件下载基础。

1.1 HTML5 下载属性

HTML5 中提供了 <a> 标签的 download 属性，可以指定下载的文件名，并在点击该链接时触发文件下载。

<a href="image.png" download="image.png">下载图片</a>

1.2 Blob 和 Base64

Blob 对象表示二进制大对象，可以存储二进制数据，例如图片、音频、视频等。Base64 是一种将二进制数据编码成字符串的格式。

我们可以使用 Blob 对象和 Base64 来实现前端的文件下载。

1.3 Axios 库

Axios 是一个流行的 JavaScript HTTP 库，可以用于发送 HTTP 请求。我们可以使用 Axios 来下载文件。

axios.get('image.png', {responseType: 'blob'})
  .then((response) => {
    const blob = response.data;
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'image.png';
    link.click();
  });

2. Vue 文件下载组件

有了 JavaScript 文件下载的基础，我们就可以开发 Vue 文件下载组件了。

2.1 基本组件

我们可以创建一个基本的 Vue 文件下载组件，如下所示：

import Vue from 'vue';

Vue.component('file-download', {
  props: {
    url: String,
    filename: String
  },
  template: `<a :href="url" :download="filename">下载</a>`
});

2.2 高级组件

我们可以进一步扩展组件的功能，使其支持更多场景。例如，我们可以添加一个进度条来显示文件下载的进度。

import Vue from 'vue';

Vue.component('file-download', {
  props: {
    url: String,
    filename: String
  },
  data() {
    return {
      progress: 0
    };
  },
  template: `
    <a :href="url" :download="filename">下载</a>
    <progress :value="progress" max="100"></progress>
  `,
  methods: {
    download() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', this.url, true);
      xhr.responseType = 'blob';
      xhr.onprogress = (e) => {
        this.progress = Math.round((e.loaded / e.total) * 100);
      };
      xhr.onload = () => {
        const blob = xhr.response;
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = this.filename;
        link.click();
        this.progress = 0;
      };
      xhr.send();
    }
  }
});