首页 新闻 搜索 专区 学院

vue如何批量下载文件(包括图片)

0
[待解决问题]

如何使用elementUI中table组件选中批量下载文件,如何做?

vue
一个前端菜鸡的主页 一个前端菜鸡 | 菜鸟二级 | 园豆:202
提问于:2021-04-29 10:18
< >
分享
所有回答(2)
0
<template>
  <div id="app">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="文件名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="downloadSelection()">批量下载</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '1.19dce30e.webp',
        description: '图片',
        href: '/img/1.19dce30e.webp'
      }, {
        date: '2016-05-03',
        name: 'logo.82b9c7a5.png',
        description: '图片',
        href: '/img/logo.82b9c7a5.png'
      }],
      multipleSelection: []
    }
  },
  methods: {
    downloadSelection () {
      this.multipleSelection.forEach(item => {
        const a = document.createElement('a')
        a.setAttribute('href', item.href)
        a.setAttribute('download', item.name)
        const e = document.createEvent('MouseEvents')
        e.initEvent('click', false, false)
        a.dispatchEvent(e)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>
by.Genesis | 园豆:2349 (老鸟四级) | 2021-04-29 11:38
0

一点奖励也不给,. 谁会帮你? 求人也得有个好的态度不是

兴想事成 | 园豆:371 (菜鸟二级) | 2021-06-22 14:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册