实现表格中
当多选多个下载后实现全部下载
浏览器本身只支持一个下载,当多个下载时只下载第一个,后续的下载会拦截,因此需要实现多个a标签同时下载需要
在这里插入图片描述
< el-dialog :title="‘下载列表’" v-dialogDrag v-if=“dialogFormVisible” id=“monitorStyle-importantResult” :visible.sync=“dialogFormVisible” :close-on-click-modal=“false”>
< div ref=“exceportZip” style=“margin-top:20px;”>
< el-button size=“small” type=“primary” @click=“openDown()” style=“margin-right: 30px;float:right;margin-bottom:5px;” >
下载
< /el-button>
< el-table
v-loading=“listLoading”
element-loading-text=“拼命加载中”
element-loading-spinner=“el-icon-loading”
element-loading-background=“rgba(190, 190, 190, 0.8)”
:data=“listresult”
style=“width: 95%;margin-left: 20px;margin-top:20px;”
max-height=“350”
class=“eltable-file”
border
fit
ref=“fileDownTable”
@row-click=“clickRowFile”
highlight-current-row
@selection-change=“handleCurrentInfoChangeFile”
:header-cell-style="{background:’#375C88’,color:’#fcfeff’}"
>
< el-table-column label=“序号” type=“index” width=“50” v-if=“false”>
< template scope=“scope”>< span>{{scope.$index+(listQuerys.pageNum - 1) * listQuerys.pageSize + 1}} < /span>< /template>
< /el-table-column>
< el-table-column
width=“50” type=“selection” align=“center”>
< /el-table-column>
< el-table-column label=“文件大小” width=“100” align=“center” prop=“zipSize” >
< /el-table-column>
< el-table-column label=“文件名称” align=“center” prop=“zipName” >
< /el-table-column>
< el-table-column label=“操作” width=“120” align=“center” prop=“isActive” >
< template slot-scope=“scope”>
< a :href=‘scope.row.zipUrl’ target="_blank" style=“color:#409EFF;line-height:40px;text-align:right;font-weight:600”>< span >下载< /span>< /a>
< /template>
< /el-table-column>
< /el-table>
< /div>
< /el-dialog>

 循环选中的数组动态创建iframe来实现多个下载

**openDown () {
const triggerDelay = 100;
const removeDelay = 1000;
const {createIFrame}= this
this.currentRowFile.forEach((item, index)=>{
createIFrame(item.zipUrl, index * triggerDelay, removeDelay)
})

},

createIFrame (url, triggerDelay, removeDelay) {
    setTimeout(function (){
        // 动态添加iframe,设置src,然后删除
        const frame = document.createElement('iframe') //创建a对象
        frame.setAttribute('style', 'display: none')
        frame.setAttribute('src', url)
        frame.setAttribute('id', 'iframeName')
        document.body.appendChild(frame)
        setTimeout(function(){
            const node =  document.getElementById('iframeName')
            node.parentNode.removeChild(node)
        }, removeDelay)
    }, triggerDelay)},**
Logo

前往低代码交流专区

更多推荐