一个简单的Vue导出封装处理

vue文件

methods: {
 // 调用导出，弹出命名对话框
 exportData () {
    this.$MxfileDownLoad({
      exportfile: this.$t('m.export'),
      fileName: this.$t('m.fileName'),
      confirm: this.$t('m.export'),
      cancel: this.$t('m.cancel'),
      handleConfirm: (name, cbClose) => this.exportConfirm(name, cbClose)
    })
  },
  // 确认导出文件
  exportConfirm (name, cbClose) {
    let parameters = {
      参数
    }
    if (!name) name = this.$t('m.fileName')
     这是一个接口请求，要求返回responseType是blob格式
    this.$api.excel(parameters, 'blob').then(res => {
      this.$filter.tableExport(res, name)
      cbClose()
    })
  },
}

tool.js

// 导出接口的处理
export const tableExport = (res, fileName) => {
  const link = document.createElement('a')
  let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', fileName + '.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

$MxfileDownLoad 的封装

组件导出index.js 入口

import MxfileDownLoad from './fileDownLoad/index'

const components = [
  MxfileDownLoad,
]

const install = function (Vue) {
  components.map(component => Vue.component(component.name, component))
  Vue.prototype.$MxfileDownLoad = MxfileDownLoad
}

export default {
  install,
  MxfileDownLoad,
}

组件vue模板（/src/index.vue）

<template>
  <!-- 文件导出 -->
  <Modal
    v-model="visible"
    width="300"
    footer-hide
    :mask-closable="false"
    draggable
    class="sod-modal-dialog sod-modal-export"
    @click="visible=false"
    :z-index="11111"
  >
    <p slot="header">
      <span>{{ exportfile }}</span>
    </p>
    <Card style="min-height: auto;">
      <iForm :model="form" :label-width="90" @submit.native.prevent>
        <FormItem :label="fileName">
          <Input v-model="form.fileName"/>
        </FormItem>
      </iForm>
    </Card>
    <div class="footer-button-wrap">
      <Button class="footer-button" @click="handleConfirm(form.fileName)">{{ confirm }}</Button>
      <Button class="footer-button" @click="visible=false">{{cancel}}</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'fileDownLoad',
  data () {
    return {
      visible: false,
      exportfile: '',
      fileName: '',
      cancel: '',
      confirm: '',
      form: {
        fileName: ''
      }
    }
  },
  methods: {
    handleConfirm () {}
  },
  mounted () {}
}
</script>
<style lang="less">
  .sod-modal-export .ivu-card-body {
    height: 54px!important;
    min-height: auto!important;
  }
</style>

导出js

import Vue from 'vue'
import DownLoad from './src/index.vue'

// 定义一个函数
var FileDownLoad = function (options) {
  // 设置默认值
  let defaults = {
    exportfile: '',
    fileName: '',
    confirm: '',
    cancel: '',
    handleConfirm: null
  }
  // 通过Vue.extend（）函数，创建一个Vue构造器 Component
  var Component = Vue.extend(DownLoad)
  // 将传入的值赋值给默认值
  for (let key in options) {
    defaults[key] = options[key]
  }

  // 实例化构造器
  var vm = new Component({
    // 如果没有挂载的话，没有关联的 DOM 元素。是获取不到$el的。
    // 或者new Component({...}).$mount('#main')
    el: document.createElement('div'), // 挂载方式之一
    data () {
      return {
        visible: false,
        form: {
          fileName: ''
        },
        exportfile: defaults.exportfile,
        fileName: defaults.fileName,
        cancel: defaults.cancel,
        confirm: defaults.confirm
      }
    },
    methods: {
      handleConfirm (name) {
        // 从body中移除组件
        let cbClose = () => { document.body.removeChild(vm.$el) }
        // 如果传入了默认的确认方法，则defaults.handleConfirm为真，执行defaults.handleConfirm.call(this)
        defaults.handleConfirm && defaults.handleConfirm.call(this, name, cbClose)
      }
    }
  })
  vm.visible = true
  // 将组件插入body中
  document.body.appendChild(vm.$el)
}

export default FileDownLoad