美文网首页工具
【前端之日常工作】导出excal表格,接口为get、post的实

【前端之日常工作】导出excal表格,接口为get、post的实

作者: 北极星丶超帅的 | 来源:发表于2019-11-28 11:33 被阅读0次

    一般导出excal表都是get方法,当参数过长时候后端就会给post方法

    get导出excal表

    exportHandler () {
          let params = qs.stringify(this.dataForm) //参数
          let apiURL =  "接口地址"
          let exportURL = "接口"
          let exportUrl = params ? `${apiURL}${exportURL}?${params}` : `${apiURL}${exportURL}`
            // window.open(exportUrl, "_blank");  //打开新的窗口
           window.location.href = exportUrl
    }
    

    post导出excal表

    //二次封装的axios文件
    export default {
      ...
      export: (url, data, config = {}) => {
        return axios({
          method: 'post',
          url,
          data: data,
          responseType: 'blob',
          headers: { 'Content-Type': ' application/json;charset=UTF-8' },
        }).then(res => {
          return Promise.resolve(res);
        }).catch(err => {
          return Promise.reject(err);
        })
      }
    }
    
    import http from '@/api/axios'
     ...
    exportHandler (fileName) {
          let exportURL = "接口"
          http.export(`${exportURL}`, this.dataForm).then(res => { // 处理返回的文件流
              const link = document.createElement('a')
              let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
    
              let time = this.setDateNumber()
              let name = (fileName && typeof fileName === 'string') ? fileName : ''
              link.download = `${name}${time}.xlsx` //下载名字
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
            })
    }
    

    相关文章

      网友评论

        本文标题:【前端之日常工作】导出excal表格,接口为get、post的实

        本文链接:https://www.haomeiwen.com/subject/gpnvwctx.html