vue jsonp 下载图片
时间: 2023-11-19 22:05:21 浏览: 41
在Vue中使用Vue-JSONP可以很方便地处理JSONP请求,包括下载图片。以下是一个简单的例子:
```javascript
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
export default {
methods: {
downloadImage() {
this.$jsonp('https://example.com/image', {
param: 'callback'
}).then(response => {
const url = response.url
const link = document.createElement('a')
link.href = url
link.download = 'image.jpg'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
}
}
```
在上面的代码中,我们使用`this.$jsonp`方法来发起JSONP请求,将图片的URL作为第一个参数传递给它。我们还传递了一个选项对象,其中`param`属性指定了回调函数的参数名。在成功获取响应后,我们可以使用JavaScript动态创建一个`<a>`标签,将图片的URL赋值给它的`href`属性,并将`download`属性设置为要下载的文件名。最后,我们将这个`<a>`标签添加到DOM中,模拟用户点击它来下载图片,然后将它从DOM中删除。