【无标题】

使用vue3+typescript-vite+Naive ui

<n-button class="btn" @click="handleExport">
            <template #icon>
              <n-icon>
                <ArrowDown />
              </n-icon> </template
            >导出</n-button
          >

引用插件

  import JSZip from 'jszip';
  import FileSaver from 'file-saver';

全选不全选

n-data-table
          :row-key="(row: any) => row"
          :columns="tableColumns"
          :data="tableData"
          :default-checked-row-keys="checkedIdArr"
          @update:checked-row-keys="handleCheck"
        />
        const checkedIdArr: any = [];

  const handleCheck = (rowKeys: DataTableRowKey[]) => {
    //赋值
    checkedIdArr.value = rowKeys;

  };

压缩成zip

const handleExport = async () => {
    if (checkedIdArr.value.length == 0) {
      // alert('请选择你要删除的数据');
      message.warning('请选择你要导出的数据');
    } else {
      let arr = [];
      checkedIdArr.value.forEach((el: any) => {
        arr.push(el.id);
      });
      const res = await downloadXdzf(arr);
      if (res.success && res.code === 200) {
        console.log(res);
        let videoData = [];
        res.data.forEach((item) => {
          videoData.push({
            fileName: item.fileName,
            filePath: 'http://10.3.10.37:9000' + item.filePath,
          });
        });

        const zip = new JSZip();
        var promises = [];
        videoData.forEach((item) => {
          const promise = getFile(item.filePath).then((data) => {
            const arr_name = item.filePath.split('/');
            const file_name = item.fileName; // 获取文件名
            console.log(data);
            zip.file(file_name, data, { binary: true });
          });
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          console.log('全部下载完成');
          zip.generateAsync({ type: 'blob' }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, '压缩包.zip');
          });
        });
      }
    }
  };