vue項目通過a標簽下載圖片至zip包的示例代碼
更新時間:2023年10月09日 08:34:30 作者:絲絨拿鐵有點甜
在vue項目中,將圖片下載可使用流的形式,下載成單個圖片,或者將多個圖片下載至zip包,本文就是介紹使用a標簽下載圖片的用法,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
在vue項目中,將圖片下載可使用流的形式,下載成單個圖片,或者將多個圖片下載至zip
包,以下就是介紹使用a
標簽下載圖片的用法:
1、圖片下載
// url為網(wǎng)絡圖片地址 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); });
到此這篇關于vue項目通過a標簽下載圖片至zip包的示例代碼的文章就介紹到這了,更多相關vue a標簽下載圖片至zip包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解讓sublime text3支持Vue語法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語法高亮顯示的示例,非常具有實用價值,需要的朋友可以參考下2017-09-09Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設置了一個展開按鈕,點擊該按鈕會顯示與當前行關聯(lián)的子表格內容,感興趣的可以了解一下2024-01-01