vue点击按钮进行文件下载

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

<script>
export default {
  methods: {
    downloadFile() {
      const url = 'https://www.example.com/file.pdf'; // 文件的 URL 地址
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', ''); // 设置文件属性为下载
      document.body.appendChild(link); // 将元素插入到 DOM 中
      link.click(); // 模拟点击下载链接进行下载
      document.body.removeChild(link); // 下载完成后移除元素
    }
  }
}
</script>

在这个例子中，我们创建了一个按钮，并在包含下载文件的方法中创建了一个链接元素，并将其插入到DOM中。然后调用了点击事件的click()方法，以模拟用户单击该链接，从而触发文件下载。下载完成后，我们从DOM中删除链接元素。您只需将URL替换为您想要下载的文件的URL即可使用该代码。