vue中实现附件下载

最近自己写网站练手遇到，一个难题，就是如何在前端界面中点击实现附件的下载，试了网上的很多方法，都报错（可能是我太菜了，没有理解那些大佬的意思），然后自己琢磨了好久，发现a标签的download属性可以实现，这个功能··········实现步骤：1.在自己的vue组件需要添加下载功能的位置写入a标签我这里href的属性值是存放在public文件夹下面需要在网页中被别人下载的文件名称，（即文件路径，p

努力发芽的豆子

2978人浏览 · 2022-10-02 20:07:53

努力发芽的豆子 · 2022-10-02 20:07:53 发布

最近自己写网站练手遇到，一个难题，就是如何在前端界面中点击实现附件的下载，试了网上的很多方法，都报错（可能是我太菜了，没有理解那些大佬的意思），然后自己琢磨了好久，发现a标签的download属性可以实现，这个功能··········

实现步骤：

1.在自己的vue组件需要添加下载功能的位置写入a标签

<a href="web学习方案2.doc" download="web学习方案2.doc" target="_blank">附件1：web学习方案</a>

我这里href的属性值是存放在public文件夹下面需要在网页中被别人下载的文件名称，（即文件路径，public文件夹中的文件引用写路径public不写）

download属性值是所需要下载文件的名称

target是指规定在何处打开链接文档。

其属性值有：（可以根据需要选择）

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

然后对a标签进行简单的样式设置（不是必须，不添加样式，也可以），就可以实现了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^