vue項(xiàng)目通過a標(biāo)簽下載圖片至zip包的示例代碼
更新時(shí)間：2023年10月09日 08:34:30 作者：絲絨拿鐵有點(diǎn)甜
在vue項(xiàng)目中,將圖片下載可使用流的形式,下載成單個(gè)圖片,或者將多個(gè)圖片下載至zip包,本文就是介紹使用a標(biāo)簽下載圖片的用法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
在vue項(xiàng)目中，將圖片下載可使用流的形式，下載成單個(gè)圖片，或者將多個(gè)圖片下載至zip包，以下就是介紹使用a標(biāo)簽下載圖片的用法：
1、圖片下載
// url為網(wǎng)絡(luò)圖片地址
axios
.get(url, {
responseType: "blob",
withCredentials: false,
})
.then((e) => {
const href = URL.createObjectURL(e.data);
const aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = href;
aLink.download = "圖片測(cè)試.png";
aLink.click();
URL.revokeObjectURL(url);
});2、圖片下載成zip壓縮包
axios
.get(url, {
responseType: "blob",
withCredentials: false,
}).then((e) => {
const blob = new Blob([e], { type: "application/zip" });
const url = URL.createObjectURL(blob);
const aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", new Date() + ".zip");
document.body.append(aLink);
aLink.click();
document.body.removeChild(aLink);
URL.revokeObjectURL(url);
});到此這篇關(guān)于vue項(xiàng)目通過a標(biāo)簽下載圖片至zip包的示例代碼的文章就介紹到這了,更多相關(guān)vue a標(biāo)簽下載圖片至zip包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vite 打包目錄結(jié)構(gòu)自定義配置小結(jié)
在Vite工程開發(fā)中,默認(rèn)打包后的dist目錄資源常集中在asset目錄下,不利于資源管理,本文基于Rollup配置原理,本文就來介紹一下通過Vite配置自定義打包目錄結(jié)構(gòu),感興趣的可以了解一下2025-08-08
Vue關(guān)于組件化開發(fā)知識(shí)點(diǎn)詳解
在本篇文章里，小編給大家分享的是關(guān)于Vue關(guān)于組件化開發(fā)知識(shí)點(diǎn)詳解內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要介紹了如何使用Vue和ElementPlus構(gòu)建前端頁(yè)面,特別是如何進(jìn)行跨域請(qǐng)求和使用Vue?Router進(jìn)行路由管理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
解決vue.js中settimeout遇到的問題(時(shí)間參數(shù)短效果不穩(wěn)定)
這篇文章主要介紹了解決vue.js中settimeout遇到的問題(時(shí)間參數(shù)短效果不穩(wěn)定)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了基于Vue實(shí)現(xiàn)電商SKU組合算法問題 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
本篇文章主要介紹了vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04
vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09