vue 点击<a></a>标签下载修改文件名

在Vue.js中，如果你想让用户点击`<a>`标签来下载文件，并更改文件名，可以创建一个链接，并设置其`href`属性指向你要下载的文件路径，同时利用`download`属性指定下载名称。下面是一个基本的例子：

<template>
  <div>
    <a @click="downloadFile('newFileName.txt')" :href="fileUrl">点击下载新文件名</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: 'path/to/your/file.txt', // 替换为你的实际文件URL
    };
  },
  methods: {
    downloadFile(fileName) {
      const element = document.createElement('a');
      element.href = this.fileUrl;
      element.download = fileName;
      element.click();
      // 如果浏览器支持取消阻止默认事件，防止表单提交等意外情况
      element.removeEventListener('click', this.downloadFile);
    },
  },
};
</script>

在这个例子中，当用户点击"点击下载新文件名"时，会触发`downloadFile`方法，生成一个新的`<a>`元素，设置其下载属性为新的文件名，然后模拟点击下载。