vue批量下载图片
需求
管理后臺需要批量導(dǎo)出選中的圖片
實(shí)現(xiàn)難點(diǎn)
選擇相應(yīng)的圖片批量導(dǎo)出或直接批量導(dǎo)出并壓縮在一個(gè)文件夾里
思路分析
1.先將選中二維碼的地址存在一個(gè)數(shù)組中
2.依次請求圖片并將其下載
3.后用jszip壓縮文件
4.最后用file-saver生成文件
實(shí)現(xiàn)代碼
import axios from 'axios' import JSZip from 'jszip' import FileSaver from 'file-saver'methods: {// 賽選出選中的圖片downloadImgAll () {let arr = [] //將圖片地址存入該數(shù)組this.InforList.forEach(element => { // 獲取到的所有圖片this.listArr.forEach(item => { // 選中圖片的idif (element.id == item) {//RealmName 這個(gè)是動態(tài)獲取的域名//imgPath 圖片地址arr.push(this.RealmName + element.imgPath)}})})this.async(arr)},// 批量下載async (selectImgList) {const data = selectImgList;const zip = new JSZip()const cache = {}const promises = []data.forEach(item => {const promise = this.getFile(item).then(data => { // 下載文件, 并存成ArrayBuffer對象const arr_name = item.split("/");let file_name = arr_name[arr_name.length - 1] // 獲取文件名// if (file_name.indexOf('.png') == -1) {// file_name = file_name + '.png'// }zip.file(file_name, data, {binary: true}) // 逐個(gè)添加文件cache[file_name] = data})promises.push(promise)})Promise.all(promises).then(() => {zip.generateAsync({type: "blob"}).then(content => { // 生成二進(jìn)制流FileSaver.saveAs(content, "photo.zip") // 利用file-saver保存文件})})},// 下載文件getFile (url) {return new Promise((resolve, reject) => {axios({method: 'get',url,responseType: 'arraybuffer'}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString())})})}}知識點(diǎn)總結(jié)
1.插件file-saver的使用
- a標(biāo)簽download屬性下載不了跨域圖片直接在瀏覽器預(yù)覽，利用file-saver將跨域訪問的圖片下載
- 可以file-saver下載其他文件，詳情可去參考其API
- 如果你需要保存較大的文件，不受 blob 的大小限制或內(nèi)存限制，可以看一下更高級的 StreamSaver.js
2.插件jszip的使用
- 點(diǎn)擊批量下載所有圖片都在瀏覽器下載文件多表現(xiàn)不友好，需將批量下載的圖片打包進(jìn)壓縮包里，故引進(jìn)了JSZip進(jìn)行打包
- JSZip是一個(gè)用于創(chuàng)建，閱讀和編輯.zip文件的JavaScript庫，具有友好而簡單的API,詳細(xì)用法可以參照其API
備注 ：
總結(jié)
