vue 数据导入excel - Githubissues

1.安装相关依赖

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

2.在项目中新建一个文件夹(一般src下新建，文件名自取，在这里命名为excel),在文件夹中放入

Blob.js 和 export2Excel.js

Blob.js ，export2Excel.js下载地址：https://pan.baidu.com/s/1bzLCiRFvPy2S1FAnNzJsBA 密码：kqfq

在build文件夹下找到webpack.base.conf.js做如下修改

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增一行
    }
  },

3.组件引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

4. vue 中代码

<el-button type="primary" @click="downloadExcel" size="small" round>下载数据<i class="el-icon-upload2 el-icon--right"></i></el-button>

5. js 中代码

            downloadExcel(){
                console.log("我来导出数据了");
                this.$confirm('确定下载列表文件?', '提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'

                    }
                ).then(() =>{
                    this.excelData = this.selectData; //你要导出的数据list。
                    this.export2Excel()
                }).catch(() =>{

                })

            },
            //数据写入excel
            export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
                    const tHeader = ['统一编号','海关编号','境内收发货人','提运单号']; // 导出的表头名信息
                    const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 导出的表头字段名，需要导出表格字段名

                    const list = that.excelData;
                    const data = that.formatJson(filterVal, list);

                    export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
                })
            },
            //格式转换，直接复制即可
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))

            },

备注：

1.const tHeader = ['统一编号','海关编号','境内收发货人','提运单号']; // 导出的表头名信息

这一行是Excel第一行头数据

const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 导出的表头字段名，需要导出表格字段名

这一行数据是 that.excelData 的key ,也就是对应的字段名

https://www.cnblogs.com/qiu-Ann/p/7743897.html

Zhaohb2017 / test_platform_front

vue 数据导入excel #4