vue 获取服务端多个数据文件导出为一个zip文件_ant-design-vue 多个文件导出压缩包

1、安装jszip与file-saver
“file-saver”: “^2.0.5”,
“jszip”: “^3.10.1”,

npm install --save jszip file-saver
1

2、api/manage.js 配置axios 请求服务

export function getActionArraybuffer(url,parameter) {
  //alert(JSON.stringify(parameter))
  let sign = signMd5Utils.getSign(url, parameter);
  //将签名和时间戳，添加在请求接口 Header
  let signHeader = {"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getDateTimeToString()};
  return axios({
    url: url,
    method: 'get',
    params: parameter,
    headers: signHeader,
    responseType: 'arraybuffer',
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、界面调用zip下载
3.1）界面按钮

<a-button @click="handleAttachmentDownload(selectionRows[0])" :disabled="selectedRowKeys.length != 1" v-has="hasDownloadAttachment" type="primary" icon="plus">导出原文</a-button>
1

3.2） js调用

 methods: {
        //将链接转化为arraybuffer文件流格式
        getFile(url,parameter) {
            return new Promise((resolve, reject) => {
                getActionArraybuffer(url, parameter)
                 .then((data) => {
                        resolve(data)
                    })
                    .catch((error) => {
                        reject(error.toString())
                    })
            })
        },
        //下载文件
        //附件ids、zip文件名为档号
       downloadFileToZip(attachments,archiveFonderNo) {
            this.loading = true
            const zip = new JSZip()
            const promises = []
            //将文件添加到压缩包中
           const  url = this.url.downloadUrl
           attachments.forEach((item) => {
                const fileUrl = url+"/"+item.id
                const promise = this.getFile(fileUrl,null).then((data) => {
                    let fileName =  item.folderNo+'/'+item.pieceNo+'/' + item.name
                   // console.log(fileName)
                    zip.file(fileName, data, { binary: true })//文件名、文件流、是否为二进制
                })
                promises.push(promise)
            })
            //等待所有文件添加完进行打包
            Promise.all(promises)
                .then(() => {
                    zip.generateAsync({ type: 'blob' }).then((content) => {
                        //利用file-saver保存文件  自定义文件名
                        let zipFileName = archiveFonderNo
                        if(zipFileName == null ||archiveFonderNo == ''){
                            zipFileName =  new Date().getTime()
                        }
                        FileSaver.saveAs(
                            content,
                            zipFileName
                        )
                        this.loading = false
                    })
                })
                .catch((err) => {
                    this.$message.error(err || '文件压缩失败')
                    this.loading = false
                })
        },
       handleAttachmentDownload(row){
            //获取原文ID
           const archiveId = row.id
           const archiveFonderNo = row.folderNo
            const  params = { ids: archiveId }
            let  attachmentIds = []
            //获取主表id下的子表id
            getAction(this.url.listDasInfoVattachmentByMainId, params).then((res) => {
                 attachmentIds = res.result               
                this.downloadFileToZip(attachmentIds,archiveFonderNo)
            })
        },
        ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64