前端excel下载

其实我们的excel下载功能是后台做的
后台需要给我们一个接口，我们点击会传入参数 然后下载
新建一个文件夹如我的是 utils/index.js
utils/index.js

export function downExcel(options) {
  const config = $.extend(true, { method: 'get' }, options)
  const $iframe = $('<iframe id="down-file-iframe" />')
  const $form = $('<form  accept-charset="UTF-8" method="' + config.method + '" />')
  $form.attr('action', config.url)
  for (const key in config.data.para) {
    $form.append('<input type="hidden" name="' + key + '" value="' + config.data.para[key] + '" />')
  }
  $iframe.append($form)
  $(document.body)
    .append($iframe)
  $form[0].submit()
  $iframe.remove()
}

其实以上代码只是在当前窗口创建一个下载链接

在需要excel下载的页面 引入下载方法

<template>
 <button @click='stuLoadExcel'>点我下载</button>
</template>

<script>
import { downExcel } from '../../utils/index'

  stuLoadExcel() {
        // stuDownExcel(this.stuDownExcel)
        downExcel({
          url: this.stuDownExcel,
          data: {
            para: this.params
          }
        })
      },
</script>

引用downExcel的方法需要注意参数是一个对象,格式如下
ex

downExcel({
  url:'/api/api/v2...',
  data:{
    para:{token:'...',start:'...',limit:'...'}
  }
})