Vue2下载excel

最新推荐文章于 2025-02-26 11:54:48 发布

原创最新推荐文章于 2025-02-26 11:54:48 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该博客介绍了如何在Vue应用中通过封装工具函数$downLoad实现文件的下载。方法包括创建a标签，设置href属性为下载地址，然后模拟点击事件触发下载。主要适用于前端开发中的文件下载场景。

基本原理是用a标签触发下载地址。

1、封装一个工具函数$downLoad挂载到Vue原型上

export default{
    install(Vue){
        Vue.prototype.$downLoad=(url)=>{
            let a=document.createElement('a');
            a.href=url;
            document.body.appendChild(a)
            a.click()//用a标签点击事件触发下载
        }
    }
}

注：需要在main.js中引入js文件，否则挂载不生效

2.拿到url地址进行下载

export default {
    methods:{
        downLoad(){
            let url='http://192.xx.xx.xx/api/...'//下载地址或者后端请求地址
            this.$downLoad(url)；
        }
    }
}