压缩包形式下载(包括saveAs和a标签两种)和单excel列表a标签下载

先说压缩包形式,saveas和a标签比较像,合在一起说,会有区分

首先要有axios和file-saver,jszip等插件 npm install axios  filter-saver  jszip下载

这个是万能公式,直接用,不墨迹

   getFile (url) {

            console.log('url',url)

      return new Promise((resolve, reject) => {

        axios({

          method: "get",

          url, // 原先后端下载单个文件的路径

          // responseType: "ArrayBuffer"  // 注意看下你自己的原先后端下载地址返回的文件格式 是blob 还是其他的啥 对应这里就要改成后端返回的下载格式

          responseType: "blob"

        })

          .then(res => {

            resolve(res.data) // 返回文件的blob   Blob {size: 151382, type: 'image/png'}

          })

          .catch(error => {

            reject(error.toString())

          })

      })

    },

我忘了引入,大家用的时候可千万不能忘::🐕

import JSZip from "jszip";

import FileSaver from "filesaver";

import axios from "axios"

然后的话就是将后端接口的文件进行拼接:

 arr.push({ fileDownUrl: 'http://oss.docuai.cn/t_cloud/v0/object2/' + item.oss_key, fileDownName: item.filename })

  const zip = new JSZip()

                const cache = {}

                const promises = []

                arr.forEach((item, i) => {

                    const promise = this.getFile(item.fileDownUrl).then(data => {

                        // 下载文件, 并存成blob对象

                        const file_name = i + 1 + item.fileDownName // 获取文件名，一定要包含文件的后缀名(因为重复的文件名只会下载一个，故需要加入下标 不同名)

                        zip.file(file_name, data, { binary: true }) // 逐个添加文件

                        cache[file_name] = data

                    })

                    promises.push(promise)

                })

以上代码主要是为了定义文件名

 Promise.all(promises).then(() => {

                    zip.generateAsync({ type: "blob" }).then(content => {

                        console.log('content',content)

                        // 生成二进制流   然后保存文件（如果这个下载不了 也可以将下方这一行换成a标签下载逻辑）

                        // FileSaver.saveAs(content, new Date().toLocaleDateString() +".zip") // 利用file-saver保存文件  自定义文件名     本想着用这个的,但是不允许,因为项目node兼容性问题,不能使用过高版本的.

                        const blobUrl = window.URL.createObjectURL(content);

    // 这里的文件名根据实际情况从响应头或者url里获取

    const filename = new Date().toLocaleDateString() +'.zip';  //这个是a标签下载的方式，我的电脑不支持其他file-saver.......

    const a = document.createElement('a');

    a.href = blobUrl;

    a.download = filename;

    a.click();

    window.URL.revokeObjectURL(blobUrl);

                    })

                })

下面说说excel下载,总的来说后端大哥那边比较逻辑比较多,我是打酱油的.....

首先是整合数据

   this.datas = {

          table_name: 'declaration report',

          sheets: [

            {

              sheet_name: 'COURIER',

              id_list: deleteDate

            }

          ]

        }

然后的话axios请求后端的接口,因为最终是后端定义excel的

 axios({

        method: 'post',

        url: '/api/data-report/export-excel',

        data: this.datas,

        responseType: 'blob',

        headers: {

          'Content-Type': 'application/json',

          'authorization': 'Bearer ' + getToken()

        }

      })

.then(res => {

        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });//这个时候要注意格式

        const fileName = 'COURIER.xlsx';//下载文件名称

        const elink = document.createElement('a');//创建a标签下载

        elink.download = fileName;//链接名字对应

        elink.style.display = 'color:red';//下载的时候让他显示红色

        elink.href = URL.createObjectURL(blob);//转换格式

        document.body.appendChild(elink);//下载

        elink.click();

        URL.revokeObjectURL(elink.href);

        document.body.removeChild(elink);

        this.$refs.multipleTable.clearSelection();

      }).finally(()=>{

        this.title=''

      this.fullscreenLoading=false

      })

finfish!!!写完博客再开始工作🐕🐕🐕