資訊專欄INFORMATION COLUMN
摘要：需求管理后臺(tái)需要批量導(dǎo)出二維碼圖片實(shí)現(xiàn)難點(diǎn)選擇相應(yīng)的圖片批量導(dǎo)出或直接批量導(dǎo)出并壓縮在一個(gè)文件夾里思路分析先將選中二維碼的地址存在一個(gè)數(shù)組中依次請(qǐng)求圖片并將其下載后用壓縮文件最后用生成文件實(shí)現(xiàn)實(shí)現(xiàn)的代碼如下批量下載下載文件并存成對(duì)象獲
需求
管理后臺(tái)需要批量導(dǎo)出二維碼圖片
實(shí)現(xiàn)難點(diǎn)選擇相應(yīng)的圖片批量導(dǎo)出或直接批量導(dǎo)出并壓縮在一個(gè)文件夾里
思路分析1.先將選中二維碼的地址存在一個(gè)數(shù)組中
2.依次請(qǐng)求圖片并將其下載
3.后用jszip壓縮文件
4.最后用file-saver生成文件
實(shí)現(xiàn)的代碼如下
import axios from "axios"
import JSZip from "jszip"
import FileSaver from "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())
})
})
};
}
// 批量下載
handleBatchDownload = async(selectImgList) => {
const data = selectImgList;
const zip = new JSZip()
const cache = {}
const promises = []
await data.forEach(item => {
const promise = this.getFile(item).then(data => { // 下載文件, 并存成ArrayBuffer對(duì)象
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保存文件
})
})
};
知識(shí)點(diǎn)總結(jié)
1.插件file-saver的使用
a標(biāo)簽download屬性下載不了跨域圖片直接在瀏覽器預(yù)覽，利用file-saver將跨域訪問的圖片下載
可以file-saver下載其他文件，詳情可去參考其API
如果你需要保存較大的文件，不受 blob 的大小限制或內(nèi)存限制，可以看一下更高級(jí)的 StreamSaver.js
2.插件jszip的使用
點(diǎn)擊批量下載所有圖片都在瀏覽器下載文件多表現(xiàn)不友好，需將批量下載的圖片打包進(jìn)壓縮包里，故引進(jìn)了JSZip進(jìn)行打包
JSZip是一個(gè)用于創(chuàng)建，閱讀和編輯.zip文件的JavaScript庫，具有友好而簡(jiǎn)單的API,詳細(xì)用法可以參照其API
備注 ：注意的是responseType, 如果下載文件是文本類型的(如: .txt, .js之類的),那么用responseType: "text"也可以, 但是如果下載的文件是圖片, 視頻之類的, 就得用arraybuffer
如果下載的文件過大, 打包的時(shí)間將會(huì)很長(zhǎng), 甚至可能會(huì)導(dǎo)致瀏覽器奔潰
還需要注意的一點(diǎn)是請(qǐng)求圖片資源時(shí)因其是異步請(qǐng)求，需要等所有圖片請(qǐng)求完再進(jìn)行打包這一步，在請(qǐng)求資源時(shí)需要await
參考文檔file-saver地址
JSZip參考文檔地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101949.html
摘要：常見前端構(gòu)建工具的分類和對(duì)比是附帶的包管理器，是內(nèi)置的一個(gè)功能，允許在文件里面使用字段定義任務(wù)在這里，一個(gè)屬性對(duì)應(yīng)一段腳本，原理是通過調(diào)用去運(yùn)行腳本命令。 前文 端技術(shù)范圍不斷發(fā)展，前端開發(fā)不僅限于直接編寫html，css和javascript，Web應(yīng)用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...
摘要：通過輸入文件流，將文件寫入硬盤，并輸出所有數(shù)據(jù)，能繼續(xù)向下游，所以文件流可以繼續(xù)被處理并被寫入到其他地方。如果寫入文件夾不存在，就會(huì)創(chuàng)建它。第二個(gè)參數(shù)，當(dāng)前任務(wù)依賴的任務(wù)列表，依賴任務(wù)在當(dāng)前任務(wù)運(yùn)行之前完成。 gulp 簡(jiǎn)介 用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程。 通過代碼優(yōu)于配置的策略，Gulp 讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)可管理。 利用 Node.js 流的威力，你可以快速構(gòu)建項(xiàng)目并...
摘要：但是由于缺乏規(guī)范化管理，出現(xiàn)了很多種模塊化規(guī)范，從針對(duì)的規(guī)范，到針對(duì)瀏覽器端的，終于在里規(guī)范了前端模塊化?？梢酝ㄟ^兩種方式之一終端或。導(dǎo)出多個(gè)配置對(duì)象運(yùn)行時(shí)，所有的配置對(duì)象都會(huì)構(gòu)建。在階段又會(huì)發(fā)生很多小事件。 隨著前端的迅速發(fā)展，web項(xiàng)目復(fù)雜度也是越來越高。為了便捷開發(fā)和利于優(yōu)化，將一個(gè)復(fù)雜項(xiàng)目拆分成一個(gè)個(gè)小的模塊，于是模塊化開發(fā)出現(xiàn)了。但是由于缺乏規(guī)范化管理，出現(xiàn)了很多種模塊化規(guī)范...
摘要：?jiǎn)栴}以上兩種方式，當(dāng)在下載格式，或者視頻文件時(shí)，瀏覽器會(huì)直接播放該文件，而達(dá)不到直接下載的功能，此時(shí)，當(dāng)下載音視頻文件時(shí)無法使用以上兩種方式。 1、通過window.open()打開新頁面下載文件 window.open(`url`, _self) 使用場(chǎng)景：下載excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最簡(jiǎn)單的方式。 優(yōu)點(diǎn)：最簡(jiǎn)潔； 弊...
摘要：參考增強(qiáng)神器，文檔搜索效率何止翻倍推薦系數(shù)圖片展示快速獲取文件文件夾名稱插件來源開發(fā)者插件介紹如名，鼠標(biāo)選中文件或者文件夾，點(diǎn)擊鼠標(biāo)中鍵激活插件即可將文件文件夾名稱復(fù)制到剪切板。 ...
閱讀 2083·2023-04-25 17:57
閱讀 1288·2021-11-24 09:39
閱讀 2487·2019-08-29 16:39
閱讀 3317·2019-08-29 13:44
閱讀 3127·2019-08-29 13:14
閱讀 2323·2019-08-26 11:36
閱讀 3816·2019-08-26 11:00
閱讀 952·2019-08-26 10:14
