如何用vue-api-creator调用接口下载文件?

weiweidong1993 commented 4 years ago

目前用标签直接拼接href可以实现文件下载,但是用api-creator就不行,返回的数据是json格式的,请问是要在this.$api里面设置吗

msidolphin commented 4 years ago

@weiweidong1993 不清楚是什么意思，服务端返回下载地址就可以了吧？这和你如何实现下载没有关系吧

weiweidong1993 commented 4 years ago

不用下载地址下,直接调用接口下载,后端接口如下:

前端代码如下:

点击下载返回数据如下:

msidolphin commented 4 years ago

@weiweidong1993 目前还不支持，计划在2.0.4版本api配置中添加responseType属性（默认为json）配置方式

{
       name: 'download',
       desc: 'download',
       method: 'GET',
       path: '/download',
       responseType: 'blob'
}

调用

// 因为原样返回服务端数据所以第三个参数要是true
this.$api('app/download', {}, true).then(data => {
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'file.png')
      document.body.appendChild(link)
      link.click()
}).catch(err => {
       console.error(err)
})

服务端demo（node.js）

async download () {
     const filePath = 'h://微信图片_20190827145947.jpg'
     this.ctx.attachment(filePath)
     this.ctx.set('Content-Type', 'application/octet-stream')
     this.ctx.set('Access-Control-Allow-Origin', 'http://localhost:8080')
     this.ctx.set('Access-Control-Allow-Credentials', true)
     this.ctx.body= fs.createReadStream(filePath)
}

你看这样能不能满足需求？

weiweidong1993 commented 4 years ago

试了一下不太行,下载的文件打不开,而且只有15B o(╥﹏╥)o

msidolphin commented 4 years ago

@weiweidong1993 升级了版本吗？2.0.4的我本地测试是可以的检查一下服务端吧

weiweidong1993 commented 4 years ago

更新以后就好啦,谢谢大佬

为大佬打call,为大佬点赞:为你唱歌~~

`为你写诗为你静止

为你做不可能的事

为你我学会弹琴写词

为你失去理智

为你写诗为你静止

为你做不可能的事

为你弹奏所有情歌的句子

我忘了说最美的是你的名字

爱情是一种怪事

你的笑容是唯一宗旨

爱情是一种本事

我在你心里什么位子

为你我做了太多的傻事

第一件就是为你写诗`

msidolphin / vue-api-creator

如何用vue-api-creator调用接口下载文件? #6