vue 项目下载（导出）功能 并携带请求头token

兄弟萌做项目时，经常会碰到导出，下载的功能，这里我参考了一些博主的论文，加上自己的理解，封装了一个全局的方法，以后项目中如果有下载（导出）功能只要引入该方法，一句代码就能gai决下载（导出）功能！

ok，发车！

可以自己建一个js文件写下载方法，引入man.js,也可以直接写在man.js(不建议)里，在这里我用的是post请求（get只是传参不一样，下次有需要补上吧）。

import axios from 'axios'

// 标注了自定义的 可以自己先写死地址和token测试下，很快的
export function newExportsExcel (url, param = {}, xlsName) {
   //这是请求的地址 （自定义）
  let _herf = window.host
  // 这是请求头中需要的token （自定义）
  let token = window.sessionStorage.getItem('token')
  axios.post(`${_herf}${url}`, param, {
    responseType: 'blob',
      headers: {
      token,
      // 这是格式，看后段要不要你传 （自定义）
      ContentType:'application/json'
    },
  }).then(res => {
    let blob = res.data
    let reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = (e) => {
      let a = document.createElement('a')
      a.download = xlsName
      a.href = e.target.result
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }).catch(err => {
    console.log(err.message)
  })
 }

后面两步非常简单，接下来，在man.js中挂载到全局，方便每个页面使用

import Vue from 'vue'

// 引入这个下载（导出）方法
import { newExportsExcel } from '@/utils/exports'

// 挂载到全局
Vue.prototype.$newExportsExcel = newExportsExcel

然后，起飞！哪里页面需要方法就用在哪里！是不是so easy？下课！

//导出
    handleExportExcel () {
      // 也可以直接把this.formData写在实参里，就不需要下列这行代码了
      const param = this.formData
      // 后端的地址、参数、下载后自定义的文件名.xlsx'
      this.$newExportsExcel('/zy/exportExcel', param, '安全页面表格.xlsx')
       }