vue-cli 导出excel

1.cd至项目目录

2.安装

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

3.src目录下新建一个文件夹命名为vendor

4.Blob.js 和 Export2Excel.js文件放到vendor文件夹下(下面有Blob.js和Export2Excel.js)

5.修改Export2Excel.js文件中的

require('script-loader!file-saver');
//修改前
//require('script-loader!src/vendor/Blob');修改这一句
//修改后
require('script-loader!@/vendor/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');

6.在要导出文件的vue文件中

data(){
	  return{
	    columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
	  }
	},
	methods:{
	    formatJson(filterVal, jsonData) {
	    　　　　return jsonData.map(v => filterVal.map(j => v[j]))
	    　},
	    export2Excel() {
	    	let that = this;
	    　　　　require.ensure([], () => {
                       //这里的require的路径要写对，不然运行会有错误
	    　　　　　　const { export_json_to_excel } = require('@/vendor/Export2Excel');
	    　　　　　　const tHeader = [that.columns1[0].title, that.columns1[1].title, that.columns1[2].title];
	    　　　　　　const filterVal = [that.columns1[0].key, that.columns1[1].key, that.columns1[2].key];
	    　　　　　　const list = that.data1;
	    		
	    　　　　　　const data = this.formatJson(filterVal, list);
	    　　　　　　export_json_to_excel(tHeader, data, '商品管理列表');
	    　　　　})
	    　 }
	}

7.最后写一个触发export2Excel()函数的容器

<button @click="export2Excel">导出</button>

8.最后无误的话导出成功

9.附上Blob.js和Export2Excel.js文件：

/* Blob.js
 * A Blob, File, FileReader & URL implementation.
 * 2018-08-09
 *
 * By Eli Grey, http://eligrey.com
 * By Jimmy Wärting, https://github.com/jimmywarting
 * License: MIT
 *   See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
 */

;(function(){

  var global = typeof window === 'object'
      ? window : typeof self === 'object'
      ? self : this

  var BlobBuilder = global.BlobBuilder
    || global.WebKitBlobBuilder
    || global.MSBlobBuilder
    || global.MozBlobBuilder;

  global.URL = global.URL || global.webkitURL || function(href, a) {
  	a = document.createElement('a')
  	a.href = href
  	return a
  }

  var origBlob = global.Blob
  var createObjectURL = URL.createObjectURL
  var revokeObjectURL = URL.revokeObjectURL
  var strTag = global.Symbol && global.Symbol.toStringTag
  var blobSupported = false
  var blobSupportsArrayBufferView = false
  var arrayBufferSupported = !!global.ArrayBuffer
  var blobBuilderSupported = BlobBuilder
    && BlobBuilder.prototype.append
    && BlobBuilder.prototype.getBlob;

  try {
    // Check if Blob constructor is supported
    blobSupported = new Blob(['ä']).size === 2

    // Check if Blob constructor supports ArrayBufferViews
    // Fails in Safari 6, so we need to map to ArrayBuffers there.
    blobSupportsArrayBufferView = new Blob([new Uint8Array([1,2])]).size === 2
  } catch(e) {}

  /**
   * Helper function that maps ArrayBufferViews to ArrayBuffers
   * Used by BlobBuilder constructor and