suzhou-jichuang-lanhai
/
bozhou-attendance-app-call
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文字

Browse Source
master
laozt 2 years ago
parent 814410086f
commit 366be74489
1 changed files with 67 additions and 71 deletions
Show Stats Download Patch File Download Diff File

138
src/views/downzip/index.vue
Unescape View File

@ -1,78 +1,73 @@
<template>
<div></div>
<div>
<!-- <button @click="aZipFile">打包下载</button> -->
</div>
</template>
<script>
import axios from "@/utils/axios.min";
import FileSaver from "@/utils/FileSaver.min.js";
import JSZip from "@/utils/jszip.min.js";
import moment from "@/utils/moment.min.js";
import axios from '@/utils/axios.min'
import FileSaver from '@/utils/FileSaver.min.js'
import JSZip from '@/utils/jszip.min.js'
import moment from '@/utils/moment.min.js'
export default {
data() {
return {
loading: null,
baseUrl: 'https://file.shop.taizhou.rfyfb.com/bozhou/',
listData: [
{
name: "test_20230308133913A005.pdf",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/test_20230308133913A005.pdf"
name: 'IMG_0065_20230308134023A010.jpeg', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "testw_20230308133921A006.docx",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/testw_20230308133921A006.docx"
name: 'test_20230308134134A014.png', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "test_20230308133929A007.png",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/test_20230308133929A007.png"
name: 'testw_20230308133921A006.docx', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "testw_20230308133937A008.xlsx",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/testw_20230308133937A008.xlsx"
name: 'test_20230308133913A005.pdf', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "IMG_0065_20230308134023A010.jpeg",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/IMG_0065_20230308134023A010.jpeg"
name: 'test_20230308134038A011.pdf', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "test_20230308134038A011.pdf",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/test_20230308134038A011.pdf"
name: 'test_20230308133929A007.png', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "8206a2e0-b73d-400c-ad59-314cdfff0ebe_20230308134124A013.jpg",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/8206a2e0-b73d-400c-ad59-314cdfff0ebe_20230308134124A013.jpg"
name: 'testw_20230308133937A008.xlsx', //文件名
dateTime: '2023/03/08/' //文件路径
},
{
name: "test_20230308134134A014.png",
url:
"https://file.shop.taizhou.rfyfb.com/bozhou/2023/03/08/test_20230308134134A014.png"
name: '8206a2e0-b73d-400c-ad59-314cdfff0ebe_20230308134124A013.jpg', //文件名
dateTime: '2023/03/08/' //文件路径
}
]
};
}
},
created() {
// console.log(this.$route.query.array);
if (this.$route.query.array) {
this.loading = this.$loading({
lock: true,
text: "正在打包压缩...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
let arr = JSON.parse(this.$route.query.array);
let fileName = moment().format("YYYYMMDD") + "_文件.zip";
this.compressAndDownload(arr, fileName);
text: '正在打包压缩下载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
let arr = JSON.parse(this.$route.query.array)
let fileName = moment().format('YYYYMMDD') + '_文件.zip'
this.compressAndDownload(arr, fileName)
}
},
methods: {
bZipFile() {
this.zipFiles("压缩1.zip", this.listData);
this.zipFiles('压缩1.zip', this.listData)
},
/**
* 同步下载打包【推荐】
@ -80,86 +75,87 @@ export default {
* @param files 文件列表，格式：[{"name":"文件名", "url":"文件下载地址"},……]
*/
zipFiles(zipName, files) {
console.log("同步下载打包开始时间：" + new Date());
console.log('同步下载打包开始时间：' + new Date())
// 创建压缩文件输出流
const zipFileOutputStream = streamSaver.createWriteStream(zipName);
const zipFileOutputStream = streamSaver.createWriteStream(zipName)
// 创建下载文件流
const fileIterator = files.values();
const fileIterator = files.values()
const readableZipStream = new ZIP({
async pull(ctrl) {
const fileInfo = fileIterator.next();
const fileInfo = fileIterator.next()
if (fileInfo.done) {
//迭代终止
ctrl.close();
ctrl.close()
} else {
const { name, url } = fileInfo.value;
const { name, url } = fileInfo.value
return fetch(url).then(res => {
ctrl.enqueue({
name,
stream: () => res.body
});
});
})
})
}
}
});
})
if (window.WritableStream && readableZipStream.pipeTo) {
// 开始下载
readableZipStream
.pipeTo(zipFileOutputStream)
.then(() => console.log("同步下载打包结束时间：" + new Date()));
.then(() => console.log('同步下载打包结束时间：' + new Date()))
}
},
/* 请求数据 */
aZipFile() {
console.log(JSON.stringify(this.listData));
this.compressAndDownload(this.listData, "");
// console.log(JSON.stringify(this.listData))
this.compressAndDownload(this.listData, '')
},
getFile(url) {
return new Promise((resolve, reject) => {
axios({
method: "get",
method: 'get',
url,
responseType: "blob"
responseType: 'blob'
})
.then(function(res) {
// console.warn(res.data);
resolve(res.data);
resolve(res.data)
})
.catch(error => {
reject(error);
});
});
reject(error)
})
})
},
compressAndDownload(data, fileName) {
let _this = this;
let _this = this
const zip = new JSZip();
const promises = []; //用于存储多个promise
const zip = new JSZip()
const promises = [] //用于存储多个promise
data.forEach(item => {
const promise = _this.getFile(item.url).then(res => {
zip.file(item.name, res, { binary: true });
});
promises.push(promise);
});
const fileUrl = _this.baseUrl + item.dateTime + item.name
const promise = _this.getFile(fileUrl).then(res => {
zip.file(item.name, res, { binary: true })
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip
.generateAsync({
type: "blob",
compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩
type: 'blob',
compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
compressionOptions: {
level: 9 // 压缩等级1~9 1压缩速度最快，9最优压缩方式
}
})
.then(res => {
FileSaver.saveAs(res, fileName ? fileName : "压缩包.zip");
_this.loading.close();
});
});
FileSaver.saveAs(res, fileName ? fileName : '压缩包.zip')
_this.loading.close()
})
})
}
}
};
}
</script>
<style lang="scss" scoped></style>

Write Preview
Loading…
Cancel
Save