如何在Vue应用中实现点击一次按钮下载多份合同，而不是一份？

在Vue应用中实现点击一次按钮下载多份合同，你需要做到以下几点：

1. **数据组织**：
首先，为每份合同创建一个对象，包含文件名、URL 和一个布尔标志表示是否已下载，如 `contracts` 数组：

data() {
  return {
    contracts: [
      { name: '合同1', url: 'http://example.com/download/contract1.pdf', isDownloaded: false },
      { name: '合同2', url: 'http://example.com/download/contract2.pdf', isDownloaded: false }
    ]
  };
}

2. **复选框或多选**：
在模板中添加复选框或多选选项让用户选择需要下载的合同，绑定 `v-model` 到数据模型，如 `selectedContracts`：

<input type="checkbox" v-for="contract in contracts" :key="contract.id" :value="contract" :checked="contract.isDownloaded">
<label>{{ contract.name }}</label>

3. **下载按钮**：
创建一个点击事件处理器，检查哪些合同已被勾选，然后调用下载方法，只对未下载的合同进行操作：

<button @click="downloadSelectedContracts">下载选定的合同</button>

<script>
methods: {
  downloadSelectedContracts() {
    this.contracts.forEach((contract) => {
      if (!contract.isDownloaded && selectedContracts.includes(contract)) {
        this.downloadContract(contract);
      }
    });
  },
  downloadContract(contract) {
    // 下载逻辑...
    if (navigator.msSaveBlob) { // 对于IE浏览器
      const blob = new Blob([fetch(contract.url).then(res => res.blob())], {type: 'application/pdf'});
      saveAs(blob, contract.name); // 使用saveAs API
    } else {
      window.open(contract.url); // 其他现代浏览器
    }
  }
}
</script>