vue項目通過a標(biāo)簽下載圖片至zip包的示例代碼
更新時間：2023年10月09日 08:34:30 作者：絲絨拿鐵有點甜
在vue項目中,將圖片下載可使用流的形式,下載成單個圖片,或者將多個圖片下載至zip包,本文就是介紹使用a標(biāo)簽下載圖片的用法,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
在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)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動驗證條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解讓sublime text3支持Vue語法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語法高亮顯示的示例，非常具有實用價值，需要的朋友可以參考下2017-09-09
關(guān)于Element?table組件滾動條不顯示的踩坑記錄
這篇文章主要介紹了關(guān)于Element?table組件滾動條不顯示的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了vue 開發(fā)一個按鈕組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設(shè)置了一個展開按鈕,點擊該按鈕會顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了使用vue如何構(gòu)建一個自動建站項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
基于Vue和CSS實現(xiàn)漸變柵格進度條,通過劃分柵格單元、顏色漸變、標(biāo)簽與刻度的絕對定位來實現(xiàn)高度靈活和交互性,進度條劃分為多個柵格,每個單元格顏色漸變并且連續(xù),可以根據(jù)不同的場景配置個性化屬性,具有極高的靈活度和交互性,感興趣的朋友一起看看吧2025-03-03
本篇文章主要介紹了詳解Vue微信公眾號開發(fā)踩坑全記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04