Detaillierte Erläuterung des Batch-Downloads und Packens von Dateien in Vue

In diesem Artikel wird hauptsächlich der Beispielcode für das Batch-Downloaden und Packen von Dateien in Vue vorgestellt. Verwenden Sie dann Ajax, um die Dateien zu komprimieren, und verwenden Sie schließlich File-Saver, um die Dateien zu generieren , Sie können mehr erfahren.

Idee: Verwenden Sie Ajax, um die Datei herunterzuladen, verwenden Sie dann jszip, um die Datei zu komprimieren, und verwenden Sie schließlich den Dateisparmodus, um die Datei zu generieren

1. Vorbereitung

Installation 3 Abhängigkeiten: axios, jszip, file-saver

yarn add axios
yarn add jszip
yarn add file-saver

2. Datei herunterladen

import axios from 'axios'
const getFile = url => {
 return new Promise((resolve, reject) => {
 axios({
  method:'get',
  url,
  responseType: 'arraybuffer'
 }).then(data => {
  resolve(data.data)
 }).catch(error => {
  reject(error.toString())
 })
 })
}

Was hier beachtet werden muss, ist der Antworttyp. Wenn die heruntergeladene Datei vom Typ Text ist (z. B.: .txt, .js usw.), dann kann der Antworttyp: „Text“ sein kann auch verwendet werden, aber wenn es sich bei der heruntergeladenen Datei um Bilder, Videos usw. handelt, müssen Sie arraybuffer

Paketdateien

import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default {
 methods: {
 handleBatchDownload() {
  const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
  const zip = new JSZip()
  const cache = {}
  const promises = []
  data.forEach(item => {
  const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
   const arr_name = item.split("/")
   const file_name = arr_name[arr_name.length - 1] // 获取文件名
   zip.file(file_name, data, { binary: true }) // 逐个添加文件
   cache[file_name] = data
  })
  promises.push(promise)
  })

  Promise.all(promises).then(() => {
  zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
   FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
  })
  })
 },
 },
}

4. Endgültiger Code

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'

const getFile = url => {
 return new Promise((resolve, reject) => {
 axios({
  method:'get',
  url,
  responseType: 'arraybuffer'
 }).then(data => {
  resolve(data.data)
 }).catch(error => {
  reject(error.toString())
 })
 })
}

export default {
 render(h) {
 return (<a on-click={ () => this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载</a>)
 },
 methods: {
 handleBatchDownload() {
  const data = [&#39;各类地址1&#39;, &#39;各类地址2&#39;] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
  const zip = new JSZip()
  const cache = {}
  const promises = []
  data.forEach(item => {
  const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
   const arr_name = item.split("/")
   const file_name = arr_name[arr_name.length - 1] // 获取文件名
   zip.file(file_name, data, { binary: true }) // 逐个添加文件
   cache[file_name] = data
  })
  promises.push(promise)
  })

  Promise.all(promises).then(() => {
  zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
   FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
  })
  })
 },
 },
}

Hinweis:

Wenn die heruntergeladene Datei zu groß ist , die Verpackungszeit wird sehr lang sein und kann sogar zum Absturz des Browsers führen

Verwandte Empfehlungen:

Batch-Download von Dateien

Python implementiert Batch-Download von Dateien

Paket-Zero-Configuration-Vue-Entwicklungsgerüst des Verpackungstools

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Batch-Downloads und Packens von Dateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!