Detailed explanation of batch downloading and packaging of files in Vue-JS Tutorial-php.cn

Detailed explanation of batch downloading and packaging of files in Vue

小云云

Release： 2018-01-18 09:26:44

Original

5033 people have browsed it

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

Copy after login

2. Download file

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

Copy after login

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

Copy after login

4. Final code

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

Copy after login

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!