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