Vue通过 data（table） 下载 xlsx 文件

一，下载依赖包 npm install xlsx -S

二，方法文件定义

import XLSX from 'xlsx'
export const downloadXlsx = (dataList, fileName) => {
	// 字符串转成字节流
    const stringToBuff = str => {
        var buf = new ArrayBuffer(str.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != str.length; ++i) {
            view[i] = str.charCodeAt(i) & 0xff
        }
        return buf;
    }
   	// 初始化Excel表格
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.aoa_to_sheet(dataList);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
    // XLSX.utils.export_json_to_excel({autoWidth: true})
    // 字节流转成二进制
    let xlsxBlob = new Blob([stringToBuff(XLSX.write(workbook, {bookType: 'xlsx', bookSST: false, type: 'binary'}))], {type: ''})

    const a = document.createElement('a');
    a.href = URL.createObjectURL(xlsxBlob);
    a.download = fileName;
    a.click()
}

三，调用 Util 方法

<template>
  <div>
    <el-button type="text"
               @click="IdClick">表格信息下载</el-button>
  </div>
</template>
<script>
import { downloadXlsx } from './Util/index'
export default {
    data(){
        return {
            //需要下载的数据（借用 Element UI 表格数据）
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]        }
    },
    methods:{
     IdClick() {
        //存储数据
      let dataList = []
      dataList.push(['日期','姓名','地址'])
      this.tableData.forEach((item) => {
        dataList.push([item.date,item.name,item.address])
      })
      // 封装我们需要导出的数据信息
      const today = new Date().Format('yyyy_MM_dd_HH_mm')
      // 这里直接调用
      downloadXlsx(dataList, `id_list信息——${today}.xlsx`)
    },
    }
}
</script>

四，下载展示内容

 本文转载，如有侵权，请联系