vue elementui 文件下载

要实现在Vue中使用ElementUI进行文件下载，可以使用ElementUI的el-button组件和JavaScript的FileSaver库。

首先，安装FileSaver库：

# 使用npm安装
npm install file-saver --save

# 使用yarn安装
yarn add file-saver

然后，在Vue组件中引入需要下载的文件和FileSaver库：

<template>
  <div>
    <el-button type="primary" @click="downloadFile">下载文件</el-button>
  </div>
</template>

<script>
import FileSaver from 'file-saver';

export default {
  methods: {
    downloadFile() {
      // 下载的文件URL
      const fileUrl = 'https://example.com/file.pdf';
      
      // 获取文件名
      const fileName = 'file.pdf'; // 可以根据需要修改为动态生成的文件名
      
      // 发起GET请求获取文件内容
      fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
          // 使用FileSaver保存文件
          FileSaver.saveAs(blob, fileName);
        });
    }
  }
};
</script>

上述代码中，`downloadFile`方法会发起一个GET请求获取文件内容，并使用FileSaver库保存文件。你可以将`fileUrl`修改为你想要下载的文件的URL，将`fileName`修改为你想要保存的文件名。

这样，当用户点击按钮时，即可触发文件下载。请注意确保传入的URL是可以正常访问的，并且需要将跨域问题进行处理。