Vue에서 파일 일괄 다운로드 및 패키징에 대한 자세한 설명

이 글에서는 주로 Vue에서 파일을 일괄 다운로드하고 패키징하기 위한 샘플 코드를 소개합니다. ajax를 사용하여 파일을 다운로드한 다음 jszip을 사용하여 파일을 압축하고 마지막으로 file-saver를 사용하여 파일을 생성합니다. 더 많은 것을 배울 수 있기를 바랍니다.

아이디어: ajax를 사용하여 파일을 다운로드한 다음 jszip을 사용하여 파일을 압축하고 마지막으로 file-saver를 사용하여 파일을 생성합니다

1. 준비

3가지 종속성 설치: axios, jszip, file-saver

yarn add axios
yarn add jszip
yarn add file-saver

2. 파일 다운로드

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

여기서 주목해야 할 것은 responseType입니다. 다운로드한 파일이 텍스트 유형(예: .txt, .js 등)인 경우 responseType: 'text'도 사용할 수 있지만, 다운로드한 파일이 사진, 동영상 등인 경우에는 arraybuffer를 사용해야 합니다

3. 파일을 압축합니다

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.

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

참고:

다운로드하는 경우 파일이 너무 크면 패키징 시간이 매우 길어지고 브라우저가 충돌할 수도 있습니다.

관련 권장 사항:

일괄 다운로드 파일

Python은 파일 일괄 다운로드를 구현합니다

패키징 도구 소포 제로 vue 개발 스캐폴딩 구성

위 내용은 Vue에서 파일 일괄 다운로드 및 패키징에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!