vue中如何把数据导出到Excel

一、借助插件

1.安装依赖

//npm
npm install -S file-saver xlsx
npm install -D script-loader

2.导入两个JS

下载Blob.js和Export2Excel.js，在src目录下assets下的js文件夹下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

Blob.js代码

/* eslint-disable */
/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {
    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {
        try {
            new Blob;
            return;
        } catch (e) {}
    }

    // Internally we use a BlobBuilder implementation to base Blob off of
    // in order to support older browsers that only have BlobBuilder
    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
            var
                get_class = function(object) {
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                }
                , FakeBlobBuilder = function BlobBuilder() {
                    this.data = [];
                }
                , FakeBlob = function Blob(data, type, encoding) {
                    this.data = data;
                    this.size = data.length;
                    this.type = type;
                    this.encoding = encoding;
                }
                , FBB_proto = FakeBlobBuilder.prototype
                , FB_proto = FakeBlob.prototype
                , FileReaderSync = view.FileReaderSync
                , FileException = function(type) {
                    this.code = this[this.name = type];
                }
                , file_ex_codes = (
                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
                ).split(" ")
                , file_ex_code = file_ex_codes.length
                , real_URL = view.URL || view.webkitURL || view
                , real_create_object_URL = real_URL.createObjectURL
                , real_revoke_object_URL = real_URL.revokeObjectURL
                , URL = real_URL
                , btoa = view.btoa
                , atob = view.atob

                , ArrayBuffer = view.ArrayBuffer
                , Uint8Array = view.Uint8Array
                ;
            FakeBlob.fake = FB_proto.fake = true;
            while (file_ex_code--) {
                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
            }
            if (!real_URL.createObjectURL) {
                URL = view.URL = {};
            }
            URL.createObjectURL = function(blob) {
                var
                    type = blob.type
                    , data_URI_header
                    ;
                if (type === null) {
                    type = "application/octet-stream";
                }
                if (blob instanceof FakeBlob) {
                    data_URI_header = "data:" + type;
                    if (blob.encoding === "base64") {
                        return data_URI_header + ";base64," + blob.data;
                    } else if (blob.encoding === "URI") {
                        return data_URI_header + "," + decodeURIComponent(blob.data);
                    } if (btoa) {
                        return data_URI_header + ";base64," + btoa(blob.data);
                    } else {
                        return data_URI_header + "," + encodeURIComponent(blob.data);
                    }
                } else if (real_create_object_URL) {
                    return real_create_object_URL.call(real_URL, blob);
                }
            };
            URL.revokeObjectURL = function(object_URL) {
                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
                    real_revoke_object_URL.call(real_URL, object_URL);
                }
            };
            FBB_proto.append = function(data/*, endings*/) {
                var bb = this.data;
                // decode data to a binary string
                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
                    var
                        str = ""
                        , buf = new Uint8Array(data)
                        , i = 0
                        , buf_len = buf.length
                        ;
                    for (; i < buf_len; i++) {
                        str += String.fromCharCode(buf[i]);
                    }
                    bb.push(str);
                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
                    if (FileReaderSync) {
                        var fr = new FileReaderSync;
                        bb.push(fr.readAsBinaryString(data));
                    } else {
                        // async FileReader won't work as BlobBuilder is sync
                        throw new FileException("NOT_READABLE_ERR");
                    }
                } else if (data instanceof FakeBlob) {
                    if (data.encoding === "base64" && atob) {
                        bb.push(atob(data.data));
                    } else if (data.encoding === "URI") {
                        bb.push(decodeURIComponent(data.data));
                    } else if (data.encoding === "raw") {
                        bb.push(data.data);
                    }
                } else {
                    if (typeof data !== "string") {
                        data += ""; // convert unsupported types to strings
                    }
                    // decode UTF-16 to binary string
                    bb.push(unescape(encodeURIComponent(data)));
                }
            };
            FBB_proto.getBlob = function(type) {
                if (!arguments.length) {
                    type = null;
                }
                return new FakeBlob(this.data.join(""), type, "raw");
            };
            FBB_proto.toString = function() {
                return "[object BlobBuilder]";
            };
            FB_proto.slice = function(start, end, type) {
                var args = arguments.length;
                if (args < 3) {
                    type = null;
                }
                return new FakeBlob(
                    this.data.slice(start, args > 1 ? end : this.data.length)
                    , type
                    , this.encoding
                );
            };
            FB_proto.toString = function() {
                return "[object Blob]";
            };
            FB_proto.close = function() {
                this.size = this.data.length = 0;
            };
            return FakeBlobBuilder;
        }(view));

    view.Blob = function Blob(blobParts, options) {
        var type = options ? (options.type || "") : "";
        var builder = new BlobBuilder();
        if (blobParts) {
            for (var i = 0, len = blobParts.length; i < len; i++) {
                builder.append(blobParts[i]);
            }
        }
        return builder.getBlob(type);
    };
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

Export2Excel.js

/* eslint-disable */
require('script-loader!file-saver')
require('./Blob')
require('script-loader!xlsx/dist/xlsx.core.min')
function generateArray(table) {
  var out = []
  var rows = table.querySelectorAll('tr')
  var ranges = []
  for (var R = 0; R < rows.length; ++R) {
    var outRow = []
    var row = rows[R]
    var columns = row.querySelectorAll('td')
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C]
      var colspan = cell.getAttribute('colspan')
      var rowspan = cell.getAttribute('rowspan')
      var cellValue = cell.innerText
      if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue

      //Skip ranges
      ranges.forEach(function(range) {
        if (
          R >= range.s.r &&
          R <= range.e.r &&
          outRow.length >= range.s.c &&
          outRow.length <= range.e.c
        ) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
        }
      })

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1
        colspan = colspan || 1
        ranges.push({
          s: { r: R, c: outRow.length },
          e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 }
        })
      }
      //Handle Value
      outRow.push(cellValue !== '' ? cellValue : null)

      //Handle Colspan
      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null)
    }
    out.push(outRow)
  }
  return [out, ranges]
}

function datenum(v, date1904) {
  if (date1904) v += 1462
  var epoch = Date.parse(v)
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {}
  var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      var cell = { v: data[R][C] }
      if (cell.v == null) continue
      var cell_ref = XLSX.utils.encode_cell({ c: C, r: R })

      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
        cell.v = datenum(cell.v)
      } else cell.t = 's'

      ws[cell_ref] = cell
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
  return ws
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook()
  this.SheetNames = []
  this.Sheets = {}
}

function s2ab(s) {
  var buf = new ArrayBuffer(s.length)
  var view = new Uint8Array(buf)
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}

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'
  )
}

function formatJson(jsonData) {
  console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle, colsWidth) {
  /* original data */

  var data = jsonData
  data.unshift(th)
  var ws_name = 'SheetJS'

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

  // 设置每列的宽度
  ws['!cols'] = colsWidth
  /* 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'
  })
  var title = defaultTitle || '列表'
  saveAs(
    new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),
    title + '.xlsx'
  )
}

3.代码如下

<template>
  <div class="excel">
    <a>导出Excel的方式</a>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="index" label="索引" width="180"></el-table-column>
      <el-table-column
        prop="nickName"
        label="标题"
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { index: '1', nickName: '沙滩搁浅我们的旧时光', name: '小明' },
        { index: '2', nickName: '女人天生高贵', name: '小红' },
        { index: '3', nickName: '海是彩色的灰尘', name: '小兰' }
      ]
    }
  },
  methods: {
    exportExcel() {
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../assets/js/excel/Export2Excel')
        const tHeader = ['序号', '昵称', '姓名']
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['index', 'nickName', 'name']
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData //把data里的tableData存到list
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(
          tHeader,
          data,
          '列表excel' + '_' + this.getNowFormatDate(),
          [{ wpx: 50 }, { wpx: 1000 }]
        )
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    getNowFormatDate() {
      var date = new Date()
      // var seperator1 = "-";
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      // var currentdate = year + seperator1 + month + seperator1 + strDate;
      var currentdate = year + month + strDate
      return currentdate
    }
  }
}
</script>

<style>
a {
  color: pink;
  font-size: 36px;
}
</style>

链接: https://cloud.tencent.com/developer/article/1394081.
链接: https://www.jb51.net/article/159964.htm.

二、纯拼接的方法拼成Excel

1.自己定义一个函数transform函数

var idTmr
//自己定义一个函数transform，在里面写我们的业务逻辑
function transform(table, name, callback) {
  //table为表格数据,name为导出文件名,
  //callback为导出完毕回调,方便你知道导出完成了(可根据自己需求决定是否需要)
  let tableInnerHTML = ''
  let headerData = ['序号', '姓名', '年龄', '性别', '爱好', '发量', '薪水']
  let bodyData = table //这里对应是表格数据，我们只需要传过来即可
  //拼接完全使用thead、tbody、tr、td、th，并且相应的tr、th、td里可以写一些类似colspan(决定占几列)
  //rowspan(决定占几行)的属性、可以用作合并行、合并列等高级操作
  tableInnerHTML += '<thead><tr>' //头部部分开始拼接！
  tableInnerHTML +=
    `<th colspan=${headerData.length} 
    				style='background:#CCFFFF;border:solid;'>` +
    '程序员的将来' +
    '</th></tr>'
  tableInnerHTML += '<tr>'
  headerData.forEach(item => {
    tableInnerHTML +=
      "<th rowspan='1' style='background:#FFFFCC;border:solid'>" +
      item +
      '</th>'
  })
  tableInnerHTML += '</tr></thead>' //头部部分结束
  tableInnerHTML += '<tbody>' //身体部分开始
  bodyData.forEach(item => {
    tableInnerHTML += '<tr>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.index + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.name + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.age + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.sex + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.hobby + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.hair + '</td>'
    tableInnerHTML +=
      "<td align='center' style='border:solid'>" + item.salaried + '</td>'
    tableInnerHTML += '</tr>'
  })
  tableInnerHTML += '</tbody>' //身体结束
  //------------OK，到此为止拼接工作做完，也就是基本的数据已经被拼接成表格了--------------------
  //tip开始(下面还有个tip结束的位置)
  /*-------从tip开始到tip结束的过程是判断浏览器类型步骤，做兼容性处理！对于你来说你完全可以不用
		 深入理解这里面的逻辑，直接复制到自己的项目里去，不会存在任何浏览器兼容性的问题！*/
  function getExplorer() {
    var explorer = window.navigator.userAgent
    if (explorer.indexOf('MSIE') >= 0) {
      return 'ie' // ie
    } else if (explorer.indexOf('Firefox') >= 0) {
      return 'Firefox' // firefox
    } else if (explorer.indexOf('Chrome') >= 0) {
      return 'Chrome' // Chrome
    } else if (explorer.indexOf('Opera') >= 0) {
      return 'Opera' // Opera
    } else if (explorer.indexOf('Safari') >= 0) {
      return 'Safari' // Safari
    }
  }

  if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
    name += '.xls'
  }
  if (getExplorer() === 'ie') {
    var curTbl = table
    var oXL = new ActiveXObject('Excel.Application')
    var oWB = oXL.Workbooks.Add()
    var xlsheet = oWB.Worksheets(1)
    var sel = document.body.createTextRange()
    sel.moveToElementText(curTbl)
    sel.select()
    sel.execCommand('Copy')
    xlsheet.Paste()
    oXL.Visible = true
    try {
      var fname = oXL.Application.GetSaveAsFilename(
        'Excel.xls',
        'Excel Spreadsheets (*.xls), *.xls'
      )
    } catch (e) {
      print('Nested catch caught ' + e)
    } finally {
      oWB.SaveAs(fname)
      // oWB.Close(savechanges = false);
      oXL.Quit()
      oXL = null
      idTmr = setInterval(Cleanup(), 1)
    }
  } else {
    tableToExcel(
      tableInnerHTML,
      name,
      callback
    ) /*在这调用下面的一个方法，传入拼接完成
                                        	  的表格，文件名，回调函数。该方法是干嘛的请往下看*/
  }
  //tip结束
} //此括号结束，我们自己封装的transform方法也结束了！90%的逻辑完成了！

/*下面的两个函数对于你来说你也完全不用深入理解里面的逻辑，你只要知道，他是在帮助你做转换，帮助你
  将拼接好的HTML字符串模板真正地转换并且输出到Excel里面去，直接当成固定书写方法，直接拿来用即可*/
function Cleanup() {
  window.clearInterval(idTmr)
}
let tableToExcel = (function() {
  let template =
    '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>'
  let format = function(s, c) {
    return s.replace(/{(\w+)}/g, function(m, p) {
      return c[p]
    })
  }
  return function(table, name, callback) {
    let ctx = { worksheet: name || 'Worksheet', table: table }
    let blob = new Blob([format(template, ctx)])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = name //这里这个name就是对应的文件名！
    a.click()
    a.remove()
    callback(
      'success'
    ) /*这里调用我们自己传入的回调方法，这样导出Excel完成后你就能
        						 在外面知道导出完毕，并且再往下做自己其他的逻辑*/
  }
})()
export default transform //导出自己封装的transform方法

2.代码如下

<template>
  <div>
    <a>用纯拼接的方法拼成Excel</a>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="hobby" label="爱好"></el-table-column>
      <el-table-column prop="hair" label="发量"></el-table-column>
      <el-table-column prop="salaried" label="薪水"></el-table-column>
    </el-table>
    <button @click="toExcel">导出表格数据到Excel</button>
  </div>
</template>
<script>
import transform from '../assets/js/exportToExcel' //这个方法来源于二步骤封装的方法，往下看
export default {
  name: 'App', //这是一个父组件，名称为App.vue
  data() {
    return {
      tableData: [], //表格数据
      column: [] //表格的列
    }
  },
  methods: {
    toExcel() {
      //调用我们封装好的方法，传3个参数过去，分别为：数据，文件名，回到函数(可根据自己需求决定回调是否需要)
      transform(this.tableData, '我是文件名', this.callback)
    },
    callback(info) {
      console.log(info)
    }
  },
  created() {
    //模拟网络请求
    this.tableData = [
      {
        index: 1,
        name: '我是1号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 2,
        name: '我是2号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 3,
        name: '我是3号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 4,
        name: '我是4号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 5,
        name: '我是5号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 6,
        name: '我是6号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 7,
        name: '我是7号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 8,
        name: '我是8号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 9,
        name: '我是9号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 10,
        name: '我是10号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 11,
        name: '我是11号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 12,
        name: '我是12号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 13,
        name: '我是13号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 14,
        name: '我是14号',
        age: 18,
        sex: '女',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      },
      {
        index: 15,
        name: '我是15号',
        age: 18,
        sex: '男',
        hobby: 'web',
        hair: 'thick',
        salaried: '99999999'
      }
    ]
    this.column = [
      { key: 'index', title: '序号', width: 120 },
      { key: 'name', title: '姓名', width: 120 },
      { key: 'age', title: '年龄', width: 120 },
      { key: 'sex', title: '性别', width: 120 },
      { key: 'hobby', title: '爱好', width: 120 },
      { key: 'hair', title: '发量', width: 120 },
      { key: 'salaried', title: '薪水', width: 120 }
    ]
  }
}
</script>

<style lang="scss">
a {
  color: pink;
  font-size: 36px;
}
</style>

链接: https://blog.csdn.net/weixin_42400955/article/details/108849631.