vue中Excel导出(后端传的值不同,前端导出方式不同)

导出1:
<Button class="mr10" type="primary" @click="exportSampleStockExcel()" :disabled="exportSampleStockExcel">导出</Button>
 
 
 exportSampleStockExcel(){
        this.$axios({
          url:'/sampleStock/exportSampleStockExcel',
          method:'get',
          responseType:'blob',
          params: {
          pageNum: this.pageParam.pageNum,
          pageSize: this.pageParam.pageSize,
        }
        }).then((data)=>{
          const url = window.URL.createObjectURL(data.data)
          const a = document.createElement('a')
          a.href = url
          a.download = '样衣列表.xls'
          document.body.appendChild(a)
          a.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(a)
        }).catch(err => {
        reject('接口请求错误')
      })
      }
 
导出2:
<Button @click="exportData">导出</Button>
 
 
 // 导出
            exportData() {
                this.$Loading.start();//显示进度条
                this.$axios({
                    url: `/chenfan_sample/sampleStockin/stockinExport`,
                    method: 'get',
                    responseType: 'blob',
                    params: {
                        sampleStockinCode: this.formInline.sampleStockinCode,
                        sampleDressFileCode: this.formInline.sampleDressFileCode,
                    }
                }).then((data) => {
                    const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
                    const url = window.URL.createObjectURL(blob)
                    const a = document.createElement('a')
                    a.href = url
                    a.download = '样衣入库单.xlsx'
                    document.body.appendChild(a)
                    a.click()
                    window.URL.revokeObjectURL(url)
                    document.body.removeChild(a)
                    this.$Loading.finish();//结束进度条
                })
            },
导出3:通过路由直接导出前端不需要做其它操作,记得加上token,token是根据登录接口获取到的,然后暴露在全局调用。this.$http.BASE_URL是基础请求路径,也是暴露为全局可以使用的。/api/ec/amo/sys/scheduling/anchor/export是get请求的导出接口
封装ajax的页面:
// 跨域请求,允许保存cookie
axios.defaults.withCredentials = true
axios.defaults.headers = {'Content-Type': 'application/json; charset=utf-8'}
// 非生产环境 && 开启代理, 接口前缀统一使用空''前缀做代理拦截!
const BASE_URL = process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/api' : window.SITE_CONFIG.baseUrl
// 对面暴露的基础请求路径
axios.BASE_URL = BASE_URL
 
 
 // 导出数据
      exportFun() {
        let exporthref = this.$http.BASE_URL + `/api/ec/amo/sys/scheduling/anchor/export?order=${this.searchForm.order}&liveStatus=${this.searchForm.liveStatus}&brandId=${this.searchForm.brandId}&token=${this.$cookie.get('token')}`
        window.open(exporthref)
      },
posted @ 2019-09-07 16:57  苏小白啊  阅读(911)  评论(0编辑  收藏  举报