Vue實(shí)現(xiàn)文件批量打包壓縮下載
上次做了一個(gè)選擇多個(gè)數(shù)據(jù)生成多個(gè)二維碼并下載,當(dāng)時(shí)項(xiàng)目催的緊,就簡(jiǎn)單寫(xiě)了個(gè)循環(huán)生成二維碼下載,一次性會(huì)下載很多文件,特別難整理;
剛好這次項(xiàng)目又遇到類似這種功能,需要一次性批量下載多個(gè)文件,那么就安排下打包下載吧!

需要用到的是file-saver、jszip兩個(gè)插件
首先,我們安裝這兩個(gè)插件,在控制臺(tái)中依次輸入下方命令執(zhí)行
npm install file-saver npm install jszip
上方依賴安裝完成,我們?cè)谛枰獙?shí)現(xiàn)打包下載的頁(yè)面中引入這兩個(gè)插件
import JSZip from "jszip"; import FileSaver from "file-saver";
在data中,我就簡(jiǎn)單定義一個(gè)數(shù)組 fileList ,用來(lái)存放要下載的文件鏈接
data() {
return {
fileList: [
{
name: 'logo1',
url: 'https://duanqinghua.com/logo.png'
},
{
name: 'logo2',
url: 'http://sharedbk.com/logo.png'
}
]
}
}
接著就是在 methods 中寫(xiě)下載事件了
// 點(diǎn)擊下載
download() {
var blogTitle = `下載文件名字`; // 下載后壓縮包的命名
var zip = new JSZip();
var promises = [];
let cache = {};
let arrImg = [];
for (let i = 0; i < this.appData.resources.length; i++) {
arrImg.push({
path: this.appData.resources[i].url, // 文件鏈接
name: this.appData.resources[i].name // 文件名稱
});
}
for (let item of arrImg) {
// item.path為文件鏈接地址
const promise = this.getImgArrayBuffer(item.path).then((data) => {
// 下載文件, 并存成ArrayBuffer對(duì)象(blob)
zip.file(item.name, data, { binary: true }); // 逐個(gè)添加文件
cache[item.name] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二進(jìn)制流
FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件 自定義文件名
});
}).catch((res) => {
alert("文件壓縮失敗");
});
},
//文件以流的形式獲?。▍?shù)url為文件鏈接地址)
getImgArrayBuffer(url) {
return new Promise((resolve, reject) => {
//通過(guò)請(qǐng)求獲取文件blob格式
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response);
} else {
reject(this.status);
}
};
xmlhttp.send();
});
}
很多小伙伴復(fù)制完代碼使用,點(diǎn)擊下載后瀏覽器會(huì)報(bào)跨域問(wèn)題,這個(gè)問(wèn)題并非前端問(wèn)題,需要后端在存儲(chǔ)文件的服務(wù)器中設(shè)置允許跨域,添加 Access-Control-Allow-Origin 即可!


到此這篇關(guān)于Vue實(shí)現(xiàn)文件批量打包壓縮下載的文章就介紹到這了,更多相關(guān)Vue文件打包壓縮下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,項(xiàng)目中主要用了Flex布局,以及viewport相關(guān)知識(shí),已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下2018-02-02
vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
在vue項(xiàng)目中 實(shí)現(xiàn)定義全局變量 全局函數(shù)操作
這篇文章主要介紹了在vue項(xiàng)目中 實(shí)現(xiàn)定義全局變量 全局函數(shù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
使用window.open和vue router新開(kāi)頁(yè)面
這篇文章主要介紹了使用window.open和vue router新開(kāi)頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果實(shí)例代碼詳解
GASP是一個(gè)JavaScript動(dòng)畫(huà)庫(kù),它支持快速開(kāi)發(fā)高性能的 Web 動(dòng)畫(huà)。GASP 使我們能夠輕松輕松快速的將動(dòng)畫(huà)串在一起,來(lái)創(chuàng)造一個(gè)高內(nèi)聚的流暢動(dòng)畫(huà)序列。這篇文章主要介紹了通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果,需要的朋友可以參考下2019-11-11
vant van-list下拉加載更多onload事件問(wèn)題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
vue 組件的封裝之基于axios的ajax請(qǐng)求方法
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請(qǐng)求方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue通過(guò)阿里云oss的url連接直接下載文件并修改文件名的方法
這篇文章主要介紹了Vue通過(guò)阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12

