今天偶然想使用vue做一个通用下载功能组件,但操作起来貌似不像自己想的那样简单。
查询资料以后,在这里为大家推荐一个十分好用的库“download.js”
第一步:下载downloadjs
npm install downloadjs
第二步:配置跨域代理(做前后端的应该都晓得这个)
ps:为了保护我的小垃圾网站,这里就给自己的网站打个小码
第三步:编写组件
这里的url写你的文件接口,当然也可以是自己的文件路径(只要是你输入到浏览器网址框能出现东西的都可以)
downloadjs核心--->download函数,直接输入url便可以下载资源
可以说是就是为了这个download函数才下载的downloadjs库.
代码贴一下
<template>
<div style="margin:20px">
<button @click="downloadimg(url)">点击下载</button>
</div>
</template>
<script>
import download from "downloadjs";
export default {
methods: {
downloadimg(turl) {
download(turl);
},
},
data() {
return {
url:'/api/bz1.jpg',
};
},
};
</script>
第四步:直接运行项目看效果
点击下载,发现文件图片成功下载(当然其他文件也可以,我这里为了方便,所以我放的是图片)
到此为止!全文结束,希望这篇文章对大家有用,也希望给个点赞和关注。