文件分享下载

文件分享下载页面

接上章 [vue实现分享功能](https://blog.youkuaiyun.com/wl_qianduan/article/details/144563719?sharetype=blogdetail&sharerId=144563719&sharerefer=PC&sharesource=wl_qianduan&spm=1011.2480.3001.8118) vue实现分享功能，此篇主要是对分享后的页面的展示

<template>
    <div class="share-container">
      <div class="share-content">
        <div class="el-card__header">
          <span style="margin-right: 20px;">分享列表</span>
          <el-button v-show="shareTableData.length" size="mini" class="el-icon-download" plain style="margin-right: 20px;" @click="downloadClick()"> 批量下载</el-button>
        </div>
        <div class="el-card__body">
          <el-table
            :data="shareTableData"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="">
            </el-table-column>
            <el-table-column
              label=""
              width="100">
              <template slot-scope="scope">
                <el-button @click="downloadClick(scope.row)" type="text" size="mini"><span style="font-size: 20px;" class="el-icon-download"></span></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </template>
<script>
// 分享的文件列表接口、下载接口
import { shareDetail, getShareFileDownloadUrl } from '@/modules/ossClient/api/ossWebApi'
export default {
  name: 'share',
  data () {
    return {
      shareTableData: [],
      encryptStr: window.location.search.substr(1) // 获取到的复制链接参数
    }
  },
  mounted () {
    this.getShareData()
  },
  methods: {
    async getShareData () {
      const res = await shareDetail(this.encryptStr)
      this.shareTableData = res.data.data
    },
    async downloadClick (row) {
      if (row) {
        const arr = []
        arr.push(row)
        this.downloadAllClick(arr) // 列表单个下载
      } else {
        this.downloadAllClick(this.shareTableData) // 全部下载（需要批量下载的码友，可以添加el-table的复选功能即可实现）
      }
    },
    async downloadAllClick (item) {
      let i = 0
      for (const element of item) {
      // 检查对象中是否有 id 属性
        i = i + 1
        const fileCopy = []
        fileCopy.push(element?.id)
        const response = await getShareFileDownloadUrl(this.encryptStr, element?.id)
        // 处理响应
        if (response.data.code == 200) {
          fileCopy[i] = document.createElement('a')
          fileCopy[i].href = response.data.data
          fileCopy[i].setAttribute('download', element.name)
          fileCopy[i].style.display = 'none' // 隐藏链接
          document.body.appendChild(fileCopy[i])
          const clickPromise = new Promise((resolve) => {
			// 定时器的作用是为了实现浏览器的多个文件的下载，作者在实际开发中遇到，本地可以批量下载，打包后不能批量下载的情况，特添加定时器解决
            setTimeout(() => {
              const clickEvent = new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window
              })
              fileCopy[i].dispatchEvent(clickEvent)
              resolve()
            }, 500) // 这里的500是延时的时间，单位是毫秒
          })
          await clickPromise
          document.body.removeChild(fileCopy[i])
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.share-container {
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: #ffffff;
  height: 100vh;
  .share-content{
    position: relative;
    top: 150px;
    width: 750px;
    margin: 0 auto;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #FFFFFF;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    .el-card__header {
      padding: 14px 15px 7px;
      min-height: 40px;
    }
  }
}
</style>