vue 批量打包下载

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>