Vue.js中如何实现文件下载？将附件链接转为可点击a标签

完全可以将链接放入<a>标签中实现可点击下载，以下是修改后的代码：

<template v-slot:item.upload_attachment="{ item }">
  <a :href="item.upload_attachment" download>
    {{ item.upload_attachment.split('/').pop() }} <!-- 显示文件名而非完整链接，更友好 -->
  </a>
</template>

关键说明： #

• 使用:href绑定动态链接，Vue中必须通过冒号解析变量item.upload_attachment
• download属性：强制浏览器触发下载行为（同域文件基本都生效，跨域文件部分浏览器会直接打开而非下载）
• 若希望显示完整链接而非文件名，直接保留{{ item.upload_attachment }}即可

如果要优化空链接的显示体验，可增加判断逻辑：

<template v-slot:item.upload_attachment="{ item }">
  <span v-if="!item.upload_attachment">无附件</span>
  <a v-else :href="item.upload_attachment" download>
    {{ item.upload_attachment.split('/').pop() }}
  </a>
</template>

内容的提问来源于stack exchange，提问作者Gavin Teo Juen