Vue + Element 实现导入导出Excel

1、首先搭建Vue 项目（具体可参考以前文章，不再详述：https://blog.csdn.net/qq_42540989/article/details/89853923）

2、引入Element（你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。）

//在main.js中引用

import ElementUi from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUi)

3、 在components 文件夹中新建一个Vue文件

// excal.vue

// index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import excal from '@/components/excal'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/enter/',
      name: 'excal',
      component: excal
    }
  ]
})

3、 运行项目

// 运行

npm run dev

4、访问  http://localhost:8080/#/enter  查看  element-ui 是否成功引入

 

---

5、导入导出 - -  开始引入工具库

//  file-saver      xlsx       script-loader

cnpm install -S file-saver xlsx

cnpm install -D script-loader

 6、导入代码: https://github.com/MrBaiLiJie/importExcal

// https://github.com/MrBaiLiJie/importExcal

6、 补充

xls 是一个特有的二进制格式，其核心结构是复合文档类型的结构，而 xlsx 的核心结构是 XML 类型的结构，采用的是基于 XML 的压缩方式，使其占用的空间更小。xlsx 中最后一个 x 的意义就在于此。

 

7、导出步骤

// 步骤

1、引入js文件

在src文件夹下新建excal文件夹，引入两个js文件     Blob.js    Export2Excel.js

// js文件 已上传至github

地址：https://github.com/MrBaiLiJie/importExcal/tree/master/src/excal

2、在main.js引入

import Blob from './excal/Blob.js'
import Export2Excel from './excal/Export2Excel.js'

3、打开Export2Excel.js

require('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');

这几个文件不支持import引入，所以需要script-loader来将他们挂载到全局环境下。

8、导出代码：https://github.com/MrBaiLiJie/importExcal

// https://github.com/MrBaiLiJie/importExcal

9、参考文献

element-ui官方文档：https://element.eleme.io/#/zh-CN/component/upload

https://segmentfault.com/a/1190000018993619#item-3-5