vue.js文件下载

// Vue.js 文件下载示例代码

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      // 创建一个隐藏的 <a> 元素用于触发下载
      const link = document.createElement('a');
      link.style.display = 'none';

      // 设置要下载的文件内容
      const fileContent = '这是要下载的文件内容。';

      // 创建一个 Blob 对象，包含文件内容和 MIME 类型
      const blob = new Blob([fileContent], { type: 'text/plain' });

      // 设置下载链接的 href 属性为 Blob URL
      link.href = URL.createObjectURL(blob);

      // 设置下载文件的名称
      link.download = 'example.txt';

      // 将 <a> 元素添加到 DOM 中
      document.body.appendChild(link);

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

      // 下载完成后移除 <a> 元素
      document.body.removeChild(link);
    }
  }
}
</script>

<!-- 解释说明：
1. 使用了 Vue.js 的单文件组件结构。
2. 在模板中定义了一个按钮，点击时会调用 `downloadFile` 方法。
3. `downloadFile` 方法中创建了一个隐藏的 `<a>` 元素，并设置了其 `href` 属性为一个包含文件内容的 Blob URL。
4. 通过设置 `link.download` 属性来指定下载文件的名称。
5. 触发点击事件以开始下载，并在下载完成后移除 `<a>` 元素。
6. 这个例子展示了如何在前端使用 JavaScript 实现文件下载功能，而无需后端支持。 -->