Vue下载Url图片而非直接浏览器打开
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
将图片转为 Blob 格式,然后再构造一个 a 标签来请求这个文件。
downloadImage() {
let link = document.createElement('a');
let url = this.fileUrl;
// 这里是将url转成blob地址
fetch(url).then(res => res.blob()).then(blob => {
link.href = URL.createObjectURL(blob);
console.log(link.href);
link.style.display = 'none';
link.download = this.fileName;
link.click();
});
}
这里使用了 fetch 方法,fetch 的基本用法非常简单,只需要传递请求的 URL 作为参数,然后通过 Promise 实例的 then 方法获取响应的结果即可。
它会有一个返回值 res,这个返回值有一些很有意思的内置函数,如:
-
res.text() :返回 URL 的文本内容。如果是网站,则返回 HTML。
-
res.json() :返回格式化的 JSON 数据。
-
res.blob() : 返回 blob 数据。
-
res.arrayBuffer():返回数组缓冲区数据。
-
res.formData() :返回 formData 数据。
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)