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()函数的容器

导出

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 : thisvar BlobBuilder = global.BlobBuilder|| global.WebKitBlobBuilder|| global.MSBlobBuilder|| global.MozBlobBuilder;global.URL = global.URL || global.webkitURL || function(href, a) {a = document.createElement('a')a.href = hrefreturn a}var origBlob = global.Blobvar createObjectURL = URL.createObjectURLvar revokeObjectURL = URL.revokeObjectURLvar strTag = global.Symbol && global.Symbol.toStringTagvar blobSupported = falsevar blobSupportsArrayBufferView = falsevar arrayBufferSupported = !!global.ArrayBuffervar blobBuilderSupported = BlobBuilder&& BlobBuilder.prototype.append&& BlobBuilder.prototype.getBlob;try {// Check if Blob constructor is supportedblobSupported = 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 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！