vue 中a 标签的在点击事件后异步获取url。

目前需要在点击a标签的时候从后台异步取跳转的url,但是每次下面的方法还没走完,即downLoadSrc 还没获取到值就已经执行跳转了,这里该怎么处理让获取到再跳转。之前是在页面mounted方法中获取的url,但是页面每次加载都会比较慢。

<a :href="downLoadSrc" :download='fileName' class="downLoad-btn" @click='getDownLoadURL'>
async getDownLoadURL(){
    let self=this;
    self.downLoadSrc=await self.getDownFile();
},
getDownFile(){
    let self=this;
    return new Promise((resolve,reject)=>{
        inpectRESTful.downLoadTemplate().then(res=>{
            console.log(res);
            let blob = new Blob([res],{
        type:'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型 
        });
            let objectUrl = URL.createObjectURL(blob);
            let url=objectUrl;
            resolve(url);
        })
    })
},

回答:

目前需要从后端下载文件,下载文件的方式主要有:1,window.open(url,’_self’); 2,a标签,由于下载下来的文件需要重新命名,因此使用a标签的dowmload来命名。
这里通过点击按钮来创建一个a标签DOM元素然后触发其click事件来下载。这样就可以解决a标签的href在触发click事件前还是空的的问题了。

    downItem(){
    let self=this;
    inpectRESTful.downLoadTemplate().then(res=>{
        console.log(res);
        let blob = new Blob([res],{
            type:'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型 
        });
        let objectUrl = URL.createObjectURL(blob);
        let url=objectUrl;
        self.downLoadSrc=url;
        var link = document.createElement('a');
        link.href=url;
        link.download=self.fileName;
        link.click();
    })
},

回答:

直接写个点击事件,不要使用href标签;标签的 href 属性用于指定超链接目标的 URL

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注