vue中点击一个按钮实现多个a标签文件下载

实现表格中
当多选多个下载后实现全部下载
浏览器本身只支持一个下载,当多个下载时只下载第一个,后续的下载会拦截,因此需要实现多个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)},**
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用js-xlsx库来实现多页Excel文件的生成和下载。具体步骤如下: 1. 安装js-xlsx库。 ```bash npm install xlsx ``` 2. 在Vue组件引入js-xlsx库。 ```javascript import XLSX from 'xlsx' ``` 3. 定义一个方法,用于生成Excel文件。 ```javascript export default { methods: { downloadExcel() { // 创建Workbook对象 const wb = XLSX.utils.book_new() // 定义表格数据 const sheet1Data = [ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', 22, '女'], ['王五', 25, '男'] ] const sheet2Data = [ ['学科', '成绩'], ['语文', 90], ['数学', 85], ['英语', 95] ] // 创建工作表对象 const sheet1 = XLSX.utils.aoa_to_sheet(sheet1Data) const sheet2 = XLSX.utils.aoa_to_sheet(sheet2Data) // 将工作表添加到Workbook对象 XLSX.utils.book_append_sheet(wb, sheet1, '表格1') XLSX.utils.book_append_sheet(wb, sheet2, '表格2') // 将Workbook对象转为二进制数据 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }) // 创建Blob对象 const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) // 创建a标签并设置下载属性 const a = document.createElement('a') a.href = URL.createObjectURL(blob) a.download = '多页Excel文件.xlsx' // 模拟点击a标签进行下载 a.click() // 释放URL对象 URL.revokeObjectURL(a.href) } } } // 将字符串转为ArrayBuffer对象 function s2ab(s) { const buf = new ArrayBuffer(s.length) const view = new Uint8Array(buf) for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xff } return buf } ``` 4. 在模板添加一个按钮,用于触发下载Excel文件的方法。 ```html <template> <div> <button @click="downloadExcel">下载Excel文件</button> </div> </template> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值