Detailliertes Beispiel für den Batch-Download von Dateien und deren Paketierung 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 den Antworttyp. Wenn die heruntergeladene Datei vom Typ Text ist (z. B. .txt, .js usw.), können Sie auch den Antworttyp „Text“ verwenden, wenn es sich bei der heruntergeladenen Datei jedoch um ein Bild, ein Video usw. handelt muss Arraybuffer verwenden

3. Paketdatei

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. Hinweis:

Wenn die heruntergeladene Datei groß ist, dauert die Verpackung sehr lange und kann sogar zum Absturz des Browsers führen.

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保存文件
  })
  })
 },
 },
}

Verwandte Empfehlungen:

Python implementiert Batch-Download von Dateien

Beispiele für zwei Methoden für PHP-Multi-File-Packaging und Herunterladen

So packen Sie Python-Skriptdateien in ausführbare Dateien

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den Batch-Download von Dateien und deren Paketierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!