关于移动端Excel 文件下载的问题

具体实现过程：

1、添加依赖

在这需要添加3个依赖包和2个js文件

使用npm安装

npm install -S file-saver xlsx（file-saver依赖 和xlsx依赖）

npm install -D script-loader
2、下载引入js包

下载两个js文件

下载地址：链接：https://pan.baidu.com/s/1LS7iLMko93Tx3Mi5RIveeg
提取码：mafy

然后在src文件夹下面新建一个 vendor文件夹，将你下载的两个js文件导入。

html 导出按钮

 <span @click="exportExcel">导出</span>

js代码

async exportExcel () {
      this.exportData = []
      for (let key in this.params) {
        if (key === 'page') {
          delete this.params.page
        }
        if (key === 'page_size') {
          delete this.params.page_size
        }
      }
      const params = objectNullKey(this.params) 
      let data = await approvalInfo(this.$axios, params) // 根据当前的条件调用相应的接口
      this.exportData = []
      for (let item of data) {
        let exportDataInfo = {
          real_name: item.apply_user.real_name,
          type: item.record_info.type,
          reimburse_time: item.record_info.reimburse_time,
          start_time: item.record_info.start_time,
          end_time: item.record_info.end_time,
          expense: item.record_info.expense,
          currency: item.record_info.currency,
          payment: item.record_info.payment,
          content: item.record_info.content,
        }
        this.exportData.push(exportDataInfo)
      }
      require.ensure([], () => {
        // eslint-disable-next-line camelcase,no-irregular-whitespace
        const {export_json_to_excel} = require('../../../utils/vendor/Export2Excel')　　// 引入文件
        const tHeader = ['申请人', '报销科目', '申请时间', '开始时间', '结束时间', '金额', '币种', '支付方式', '备注'] // 将对应的属性名转换成中文
        const filterVal = ['real_name', 'type', 'reimburse_time', 'start_time', 'end_time', 'expense', 'currency', 'payment', 'content']// table表格中对应的属性名
        const list = this.exportData // this.sels就是你想要导出的数据
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '报销excel数据')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

objectNullKey 函数

主要是用来清空空对象
如：let data = {
a: ‘’,
b: ‘111’
}
objectNullKey(data)
结果为： let data = {
b: ‘111’
}

function objectNullKey (obj) {
  // 当对象里面key 值为 '',直接删除对象
  var key = Object.keys(obj).pop()
  if (key in obj) {
    if (obj[key] === '') delete obj[key]
  }
  return obj
}

主要哦实现逻辑

 require.ensure([], () => {
        const {export_json_to_excel} = require('../../../utils/vendor/Export2Excel')　　// 引入文件
        const tHeader = ['申请人', '报销科目', '申请时间', '开始时间', '结束时间', '金额', '币种', '支付方式', '备注'] // 将对应的属性名转换成中文
        const filterVal = ['real_name', 'type', 'reimburse_time', 'start_time', 'end_time', 'expense', 'currency', 'payment', 'content']// table表格中对应的属性名
        const list = this.exportData // this.sels就是你想要导出的数据
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '报销excel数据')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

tHeader (表头)
data（数据）
报销excel数据（表名）
照理说这样就好了，但是在电脑模拟器上实验是好的，但是呢，在手机上就有问题，在手机上文件名不对，下载下来的文件名都是二进制

为什么会这样？？？？

没办法只能看源码
Export2Excel 文件中的实现方法是这样的：

export function export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    console.log('a')
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";
    console.log(data);

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});

    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
}

saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx") 中 实现方法是动态创建一个a 标签，然后把 文件名 赋值给a标签的download 属性
文件名不出现肯定和这有关，我在网上搜了一波发现
部分手机不支持 a标签的dowload 属性
好莫，这下把路给堵死了，
前台移动端是没办法了，直接交给后台去做
实现方法：
```
 downloadFile (data) {
  const saveLink = document.createElement('a')
  saveLink.href = data
  var event = document.createEvent('MouseEvents')
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  saveLink.dispatchEvent(event)
},
    async exportExcel () {
  for (const key in this.params) {
    if (key === 'page') {
      delete this.params.page
    }
    if (key === 'page_size') {
      delete this.params.page_size
    }
  }
  const params = objectNullKey(this.params)
  // 导出工作汇报表格
  const data = await getWorkReportExport(this.$axios, params)
  this.downloadFile(data.url)
},
```
好了，完了。