Explication détaillée du téléchargement par lots et du packaging des fichiers dans Vue-js tutoriel-php.cn

Explication détaillée du téléchargement par lots et du packaging des fichiers dans Vue

小云云

Libérer： 2018-01-18 09:26:44

original

5090 Les gens l'ont consulté

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

Copier après la connexion

Télécharger le fichier

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

Copier après la connexion

Ce qu'il faut noter ici, c'est le type de réponse. Si le fichier téléchargé est de type texte (tel que : .txt, .js, etc.), alors le type de réponse : 'text' peut également être utilisé, mais si le fichier téléchargé est Pour des images, des vidéos, etc., vous devez utiliser arraybuffer

3 Fichiers de package

<🎜. >

import JSZip from &#39;jszip&#39;
import FileSaver from &#39;file-saver&#39;
export default {
 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保存文件
  })
  })
 },
 },
}

Copier après la connexion

4. Code final

Remarque :

import axios from &#39;axios&#39;
import JSZip from &#39;jszip&#39;
import FileSaver from &#39;file-saver&#39;

const getFile = url => {
 return new Promise((resolve, reject) => {
 axios({
  method:&#39;get&#39;,
  url,
  responseType: &#39;arraybuffer&#39;
 }).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保存文件
  })
  })
 },
 },
}

Copier après la connexion

Si le fichier téléchargé est trop volumineux , le temps d'emballage sera très long, et peut même provoquer un crash du navigateur

Recommandations associées :

Téléchargement par lots de fichiers

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

Outil d'emballage colis échafaudage de développement de vue sans configuration

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!