调用API接口下载文件的两种实现方式GET POST

发送参数ids长度过长,选择post形式发送请求

get

1. 获取url

   buildURL(url, params) {
       if (!params) {
           return url
       }
   
       var serializedParams
       if (isURLSearchParams(params)) {
           serializedParams = ()
       } else {
           var parts = []
           forEach(params, function serialize (val, key) {
               if (val === null || typeof val === 'undefined') {
                   return
               }
               if (isArray(val)) {
                   key = key + '[]'
               } else {
                   val = [val]
               }
               forEach(val, function parseValue (v) {
                   if (isDate(v)) {
                       v = ()
                   } else if (isObject(v)) {
                       v = (v)
                   }
                   (encode(key) + '=' + encode(v))
               })
           })
           serializedParams = ('&')
       }
       if (serializedParams) {
           var hashmarkIndex = ('#')
           if (hashmarkIndex !== -1) {
               url = (0, hashmarkIndex)
           }
           url += (('?') === -1 ? '?' : '&') + serializedParams
       }
       return url
   }

    

2. iframe下载文件

   downLoadFiles = (srcPath) => {
       var iframe = ('hiddenDownloader')
       if (iframe === null) {
           iframe = ('iframe')
            = 'hiddenDownloader'
            = 'none'
           (iframe)
       }
        = srcPath
   }

3. 调用下载方法

   let params = { ids: ids }
   var srcPath = (`/api/compass/export/history/download`, params)
   (srcPath)

post

1. axios调用后台API接口获取数据

   this.$({
       method:'post',
       url:'/api//files/filesearch/download',
       data:{
         ids:[
           "53ba3fefeb4086a05b805ac9a745a011",
           "c8ca2aea8ff822f928903522fe7457c3",
           "fd7baec6fff7e73c1817dcf4743ac2ba",
           "327dd01cb5351f1fa0537d909b5e9000"
         ]
       },
       responseType:'arraybuffer'// 下载文件可以打开
     }).then((response)=>{
       ();// 请求成功回调 ,将获取的下载文件数据返回
     })
   }

2. 创建临时blob的url

    let url = (new Blob([data]))

    

3. 创建隐藏下载元素,指定href为blob的url

   let link = ('a') // 创建一个超链接
    = 'none' // 隐藏元素显示
    = url // 设置元素路径
    = 'download_' + new Date().valueOf() + '.zip' // 下载后文件名
   () // 下载文件
   (link)// 下载完成移除元素
   (url)// 释放掉blob对象

4. 完整代码

   getDownloadData () {
     this.$({
       method: 'post',
       url: '/api//files/filesearch/download',
       data: {
         ids: [
           '53ba3fefeb4086a05b805ac9a745a011',
           'c8ca2aea8ff822f928903522fe7457c3',
           'fd7baec6fff7e73c1817dcf4743ac2ba',
           '327dd01cb5351f1fa0537d909b5e9000'
         ]
       },
       responseType: 'arraybuffer'// 下载文件可以打开
     }).then((response) => {
       ()// 请求成功回调 ,将获取的下载文件数据返回
     })
   },
   download(data){
     if (!data) {
       return
     }
     let url = (new Blob([data]))
     let link = ('a')
      = 'none'
      = url
      = 'download_' + new Date().valueOf() + '.zip'
     ()
     (link)
     (url)
   }