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