vue實現(xiàn)批量下載文件

更新時間：2023年12月11日 08:19:51 作者：碼字哥

這篇文章主要為大家詳細介紹了vue實現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

今天ld提了一個需求，說頁面的列表里面有要下載的地址,然后點擊批量下載。我思索片刻，給出了代碼

1.這個是列表頁面的代碼

<!-- 這個是列表頁面的代碼 -->
<el-table :data="userListShow" align="center"
           border highlight-current-row size="small" 
           style="width: 100%"
           stripe
            ref="table">
            <el-table-column 
              label="選擇"
              width="45px"
              fixed
            >
              <template slot-scope="scope" > 
                <el-checkbox class="biaodiandian"  v-model="scope.row.selected" :label="scope.row" @change="clickChange(scope.row)"><i></i></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="barcode"  width="200px"  show-overflow-tooltip align="center" label="條碼號"></el-table-column>
            <el-table-column prop="createTime"  width="200px" show-overflow-tooltip align="center" label="登記時間"></el-table-column>
</el-table>

2.這個是選擇框的代碼

data(){
    return(){
       selectedRows:[],  //這個是傳遞的復選框的值，因為是批量選擇嗎，所以給的是數(shù)組
    }
}   
 
 
 methods:{
 
     //選擇文件 選擇復選框
    clickChange(row) {
      if (row.selected) {
        this.selectedRows.push(row); // 選中時添加到數(shù)組中
      } else {
        const index = this.selectedRows.findIndex(item => item === row);
        if (index > -1) {
          this.selectedRows.splice(index, 1); // 取消選中時從數(shù)組中移除
        }
      }
    },
 
  
  }

3.好了，現(xiàn)在該批量下載了，之所以寫上面兩步，是因為得做批量選擇的復選框，也就是得批量拿到數(shù)據(jù)

<!-- 這個是批量下載的按鈕->
<el-button type="warning" @click="handleDownload" round size="mini">下載體檢報告</el-button>

4.這個按鈕的方法

methods:{
 
 
//這個可以直接賦值過去就能用，還有你的瀏覽器得開啟允許批量下載，也就是第一次回
//觸發(fā)一個提示說，是否允許批量下載多個文件，要點擊允許就行了
async handleDownload() {
    //this.selectedRows 這個就是上面寫的那個批量拿到的數(shù)據(jù)
    //row.reportUrl 這個就是列表數(shù)據(jù)里面的地址路徑，
    const reportUrls = this.selectedRows.map(row => row.reportUrl);
    for (const reportUrl of reportUrls) {
      if (reportUrl) { //判斷是否存在
        const link = document.createElement('a');
        link.href = reportUrl;
        link.download = reportUrl.substring(reportUrl.lastIndexOf('/') + 1);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        await new Promise((resolve) => setTimeout(resolve, 500));
        document.body.removeChild(link);
      }
    }
  },
 
}

好了兄弟們，到這里就結束了，上面的代碼可以直接拿過就能用，不想要上面插件上面依賴的，就是vue的代碼。

到此這篇關于vue實現(xiàn)批量下載文件的文章就介紹到這了,更多相關vue下載文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: