Detailed explanation of batch downloading and packaging of files in Vue

This article mainly introduces the sample code for batch downloading and packaging of files in Vue. Use ajax to download the files, then use jszip to compress the files, and finally use file-saver to generate the files. If you are interested, you can learn more. I hope it can help you. .

Idea: Use ajax to download the file, then use jszip to compress the file, and finally use file-saver to generate the file

1. Preparation

Installation 3 dependencies: axios, jszip, file-saver

yarn add axios
yarn add jszip
yarn add file-saver

2. Download file

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

What needs to be noted here is the responseType. If the downloaded file is of text type (such as: .txt, .js, etc.), then responseType: 'text' can also be used, but if the downloaded file is an image, video Class, you have to use arraybuffer

3. Package file

##

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

Note:

If the downloaded file is too large, the packaging time will be very long, and may even cause the browser to crash

Related recommendations:

Batch download files

Python implements batch download files

Packaging tool parcel zero configuration vue development scaffolding

The above is the detailed content of Detailed explanation of batch downloading and packaging of files in Vue. For more information, please follow other related articles on the PHP Chinese website!