批量下载/导出excel文件或音频文件(浏览器)

不适用批量的详细案例可以看这边:http://t.csdn.cn/vrjPf

以下都是随便弄个点击事件@clike给她触发即可实现导出。当然了。

api的使用,接口带blod

 getAPI: function (data) {
      const url = this.uri + '/API'
      return this.request({
        url: url,
        method: 'post',
        responseType: 'blob',
        data: data
      })
    },

批量导出教程为:这边vnd.ms-excel为批量导出文件,详细参数可以看单个导出的。

  batchExport() {
      // let a = document.createElement("a");
      // a.href = this.$Api.globalUrl + res.data;
      // a.click();
      console.log(this.selectedKeys)
      this.tActivityApplyApi.API.exportGroupByTeam(this.params.record.id,this.selectedKeys.length===0?"":this.selectedKeys.join(',')).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        const url = window.URL || window.webkitURL || window.moxURL // 兼容不同浏览器的url对象
        // 创建下载链接
        const downUrl = url.createObjectURL(blob)
        // 创建a标签
        const link = document.createElement('a')
        link.href = downUrl
        link.download = '['+this.params.record.name+'] 信息导出.xlsx'

        link.click()
        console.log(res)
      })
    },

这边是导出音频:octet-stream。详细参数可以看单个导出的。

batchAudio(){
      this.tActivityApplyApi.API.audiodownload(this.params.record.id,this.selectedKeys.length===0?"":this.selectedKeys.join(',')).then(res => {
      const blob = new Blob([res], { type: 'application/octet-stream' })
      const url = window.URL || window.webkitURL || window.moxURL // 兼容不同浏览器的url对象
      // 创建下载链接
      const downUrl = url.createObjectURL(blob)
      // 创建a标签
      const link = document.createElement('a')
      link.href = downUrl
      link.download = '['+this.params.record.name+'] 活动参加的曲目音频文件导出.zip'

      link.click()
      })
    },

记得:

在API中需要适用:

exportGroupByTeam:function (id,ids){
      return this.request({
        url: this.uri ,
        method: 'post',
        responseType: 'blob',
        data: {
          ids
        }
      })
    },

其他:修改word后缀为xls或者其他修改他的类别。res为后端返回的流

   const blob = new Blob([res], { type: 'application/octet-stream' })
        const url = window.URL || window.webkitURL || window.moxURL // 兼容不同浏览器的url对象
        // 创建下载链接
        const downUrl = url.createObjectURL(blob)
        // 创建a标签
        const link = document.createElement('a')
        link.href = downUrl
        link.download = 'sql.word'
        link.click()

你可能感兴趣的:(2022Vue学习笔记,vue.js,前端,javascript)