vue中点击一个按钮实现多个a标签文件下载
实现表格中当多选多个下载后实现全部下载浏览器本身只支持一个下载,当多个下载时只下载第一个,后续的下载会拦截,因此需要实现多个a标签同时下载需要< el-dialog :title="‘下载列表’" v-dialogDrag v-if=“dialogFormVisible” id=“monitorStyle-importantResult”:visible.sync=“dialog...
实现表格中
当多选多个下载后实现全部下载
浏览器本身只支持一个下载,当多个下载时只下载第一个,后续的下载会拦截,因此需要实现多个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)},**
更多推荐
所有评论(0)