vue 实现导出Excel功能

vue 导出Excel

安装Excel插件

npm install --save xlsx file-saver

页面使用

<template>
  <el-button size="small" type="success" icon="el-icon-download" @click="exportExcel()">导出</el-button>
</template>
<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  name: 'downExcel',
  props: {
	  title:{
		  type: String,
		  default: ''
	  }
  },
  methods: {
    exportExcel() {
    	let xlsxParam = {raw: true}; //转换成excel时，使用原始的格式
    	var wb = XLSX.utils.table_to_book(
    		document.querySelector("#download"),//#download tabel的id值
    		xlsxParam
    	);
    	var wbout = XLSX.write(wb, {
    		bookType: "xlsx",
    		bookSST: true,
    		type: "array"
    	});
    	try {
    		FileSaver.saveAs(
    			new Blob([wbout], { type: "application/octet-stream" }),
    			this.title + new Date().getTime() + ".xlsx"
    		);
    	} catch (e) {
    		if (typeof console !== "undefined") console.log(e, wbout);
    	}
    	return wbout;
    }
  }
}