머리말
프로젝트 개발 중에 제품 관리자는 배치 패키징 기능을 실현하고 시스템에서 첨부 파일을 다운로드하는 것과 같은 요구 사항을 제기했습니다. 원래 시스템에는 단일 다운로드 및 일괄 다운로드 기능이 있었지만 이제 비즈니스 측면의 요구에 따라 일괄 패키지 다운로드를 추가해야 합니다.
초기 아이디어는 인터페이스가 백엔드에서 작성된다는 것입니다. 그러나 나중에 생각해보면 파일의 URL 주소가 이미 시스템에 존재하므로 왜 귀찮게 백엔드 쓰기 인터페이스를 반복하고 프론트엔드 처리로 충분합니다.
1. 필수 패키지
- jszip
- 파일 세이버
- 축
JSZipZIP 파일을 생성, 읽기 및 편집하기 위한 JavaScript 라이브러리이며 브라우저에서 직접 zip 아카이브를 생성할 수 있는 친근하고 간단한 API가 있습니다.
file-saver
2. 설치
npm install jszip --save / yarn add jszip -S
npm install file-saver --save / yarn add file-saver -S
// axios 相信大家安装的都有
3. 수입
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';
4. 완전한 코드 분석 및 사용
import React, {
memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';
// 在这里定义一个数据源，格式为 文件url + 文件名，可以根据自己的项目获取
const dataSouce = [
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/7lGQFepQllMVl8ZTbMftS5',
fileName: '文件一'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE',
fileName: '文件二'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/4m0Qy7k1qMrh8QIA8DbHce',
fileName: '文件三'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ',
fileName: '文件四'
},
]
const Index = () => {
// 将文件 url 格式转换为 Bolb 类型格式 或者 arraybuffer 格式
const getFileData = (fileUrl: string) => {
return new Promise((resolve, reject) => {
axios(fileUrl, {
method: 'GET',
responseType: 'blob' // 返回的数据会被强制转为blob类型 ，转换成arraybuffer 也行
}).then((res) => {
console.log('res', res)
resolve(res)
}).catch(error) => {
reject(error)
}
})
}
// 批量打包下载事件
const handleBatchDown = async () => {
const zip = new JSZip() // 创建实例对象
const promises: any = []
dataSource.forEach((item: any) => {
const promise = getFile(item.fileUrl).then((res: any) => {
const fileName = item.fileName + ''
// 创建文件用file()，创建文件夹用 floder()
zip.file(fileName, res, {
binary: true})
})
promises.push(promise)
})
/**
Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例,
只有当all([p1, p2, p3]) 中的每一个 Promise 实例的状态都变成 fulfilled, Promise.all()的状态才会变成 fulfilled，此时 p1, p2, p3 的返回值组成一个数据，传给 Promise.all()的回调函数
只要 p1, p2, p3 中任何一个被 rejected, Promise.all() 的状态就会变成 rejected，此时第一个被 rejected 的实例的返回值，会传给 Promise.all()的回调函数。
在上面的代码中，promises 数组中的每一个元素，都是 Promise 实例，所以需要用到 Promise.all()
*/
// 生成 zip 文件
Promise.all(promises).then(() => {
// 生成zip 文件
zip.generateAsync({
type: 'blob',
compression: 'DEFLATE', // STORE: 默认不压缩， DEFLATE：需要压缩
compressionOptions: {
level: 9 // 压缩等级 1~9 1 压缩速度最快， 9 最优压缩方式
}
}).then((res: any) => {
FileSaver.saveAs(res, '测试.zip') // 使用FileSaver.saveAs保存文件，文件名可自定义
})
})
}
return (
<div>
<Button onClick = {
handleBatchDown}>批量打包下载文件</Button>
</div>
)
}
export default memo(Index)
5. 부분 코드 분석
const zip = new JSZip() // 创建实例对象
zip.file(fileName, res, {
binary: true})
- zip.file(이름, 내용, 옵션), 파일을 만드는 데 사용되며 세 가지 매개변수가 있습니다. 여기서 이름은 파일 이름이고 내용은 파일의 내용입니다.
- zip.folder(이름), 폴더 생성에 사용
이 두 함수는 반환 값을 가지며 반환 값은 JSZip객체 . 즉, 체인에서 호출 할 수 있습니다.
예를 들어 text.txt 파일과 test 폴더를 만들고 test 폴더 아래에 text2.txt 파일을 만들면 다음과 같은 연쇄 쓰기 방법을 사용할 수 있습니다.
const zip = new JSZip()
zip.file('test.txt', '哈哈哈哈哈').folder('测试文件夹').file('text2.txt', '我是另一个文件')
위의 경우에만 zip.file사용 .
zip.file의 세 번째 매개변수는 선택적이며 객체이며 일반적인 값은 다음과 같습니다. binary여기 base64에서 { binary: true }로 설정하여 이진 데이터를 반환합니다.
Bolb 및 arraybuffer 구문 분석
BlobBinary 유형의 대형 객체를 나타냅니다. JavaScript에서 Blob 유형의 객체는 불변성을 나타냅니다.
Blob 개체에는 다음과 같은 두 가지 속성이 있습니다 size.type
- size 속성은 데이터의 크기를 나타내는 데 사용됩니다.
- 유형은 MIME 유형 문자열입니다.
아래 그림과 같이 위의 getFileData방법
ArrayBuffer개체는 이진 데이터 조각을 나타내며 메모리에서 데이터를 시뮬레이트하는 데 사용됩니다. 이 객체를 통해 JavaScript는 메모리 데이터의 표현이라고 할 수 있는 바이너리 데이터를 읽고 쓸 수 있습니다.
둘 사이의 차이점:
- Bolb 개체는 일반적으로 파일을 읽고 쓰는 데 사용되는 이진 파일을 조작하는 데 사용됩니다.
- ArrayBuffer는 메모리 조작에 사용됩니다.
위의 파일은 아래 그림과 같이 responseType: 'arraybuffer'인쇄된
