npm install jszip
npm install file-saver
在页面的script中引入依赖
import JSZip from 'jszip'
import FileSaver from 'file-saver'
<template>
<div class="hello">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="down">下载</el-button>
</div>
</div>
</template>
<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default {
name: 'HelloWorld',
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-02',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-04',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-01',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-08',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-06',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}, {
date: '2016-05-07',
name: '王小虎',
address: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection.push(val[0].address);
},
down() {
console.log(this.multipleSelection)
let temp = this.multipleSelection
let urls = []
for (let i = 0; i < temp.length; i++) {
let a = {
fileUrl: temp[i],
renameFileName: new Date().getTime() + '_' + i + '.jpeg'
}
urls.push(a)
}
console.log(urls)
this.filesToRar(urls)
},
/**文件打包
* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
* filename 压缩包名
* */
filesToRar(arrImages) {
let _this = this;
let zip = new JSZip();
let cache = {};
let promises = [];
_this.title = '正在加载压缩文件';
for (let item of arrImages) {
const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.renameFileName, data, {
binary: true
}); // 逐个添加文件
cache[item.renameFileName] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({
type: "blob"
}).then(content => {
_this.title = '正在压缩';
// 生成二进制流
FileSaver.saveAs(content, 'filename'); // 利用file-saver保存文件 自定义文件名
_this.title = '压缩完成';
});
}).catch(res => {
_this.$message.error('文件压缩失败');
});
},
//获取文件blob
getImgArrayBuffer(url) {
let _this = this;
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function() {
if (this.status == 200) {
resolve(this.response);
} else {
reject(this.status);
}
}
xmlhttp.send();
});
},
}
}
</script>