快捷導(dǎo)航

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

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

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

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

1.這個(gè)是列表頁面的代碼

<!-- 這個(gè)是列表頁面的代碼 -->
<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="條碼號(hào)"></el-table-column>
            <el-table-column prop="createTime"  width="200px" show-overflow-tooltip align="center" label="登記時(shí)間"></el-table-column>
</el-table>

2.這個(gè)是選擇框的代碼

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

3.好了，現(xiàn)在該批量下載了，之所以寫上面兩步，是因?yàn)榈米雠窟x擇的復(fù)選框，也就是得批量拿到數(shù)據(jù)

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

4.這個(gè)按鈕的方法

methods:{
 
 
//這個(gè)可以直接賦值過去就能用，還有你的瀏覽器得開啟允許批量下載，也就是第一次回
//觸發(fā)一個(gè)提示說，是否允許批量下載多個(gè)文件，要點(diǎn)擊允許就行了
async handleDownload() {
    //this.selectedRows 這個(gè)就是上面寫的那個(gè)批量拿到的數(shù)據(jù)
    //row.reportUrl 這個(gè)就是列表數(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);
      }
    }
  },
 
}

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

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

您可能感興趣的文章: