前端（vue）实现下载功能（新思路）----downloadjs的使用

今天偶然想使用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>

第四步：直接运行项目看效果

点击下载，发现文件图片成功下载（当然其他文件也可以，我这里为了方便，所以我放的是图片）

到此为止！全文结束，希望这篇文章对大家有用，也希望给个点赞和关注。