Exemple détaillé de la façon de télécharger par lots des fichiers et de les empaqueter dans Vue

Cet article présente principalement l'exemple de code pour le téléchargement par lots et l'empaquetage de fichiers dans Vue. Utilisez ajax pour télécharger les fichiers, puis utilisez jszip pour compresser les fichiers, et enfin utilisez file-saver pour générer les fichiers. , vous pourrez en savoir plus. J'espère que cela pourra vous aider.

Idée : utilisez ajax pour télécharger le fichier, puis utilisez jszip pour compresser le fichier, et enfin utilisez file-saver pour générer le fichier

Préparation

Installation 3 dépendances : axios, jszip, file-saver

yarn add axios
yarn add jszip
yarn add file-saver

2 Télécharger le fichier

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())
 })
 })
}

Ce qui doit être noté ici est. le type de réponse. Si le fichier téléchargé est de type Texte (tel que : .txt, .js, etc.), vous pouvez également utiliser le type de réponse : 'texte', mais si le fichier téléchargé est une image, une vidéo, etc., vous devez utiliser arraybuffer

3. Fichier du package

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

Code final

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

Remarque :

Si le fichier téléchargé est trop volumineux, le temps de packaging sera très long, et pourra même provoquer le crash du navigateur.

Recommandations associées :

Python implémente le téléchargement par lots de fichiers

Exemples de deux méthodes pour l'empaquetage multi-fichiers php et téléchargement

Comment empaqueter des fichiers de script Python dans des fichiers exécutables

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!