Vue导出Excel表格

picture

示例

demo 代码示例

建立项目

vue init webpack excel-export       建立excel-export项目

cd excel-export                     进入excel-export文件夹下

npm install                         安装依赖

npm run dev                         运行

导出 Excel 关键

1、安装依赖

npm install -S file-saver           用来生成文件的web应用程序

npm install -S xlsx                 电子表格格式的解析器

npm install -D script-loader        将js挂载在全局下

2、添加 Blob.js 及 Export2Excel.js 文件

在 src 目录下创建一个文件(vendor) 并添加Blob.js和Export2Excel.js，对 Export2Excel.js 添加了一段代码，可以使导出的表格列宽自适应。所改动代码为 147 - 155 行，具体如下：

/*设置worksheet每列的最大宽度*/
  const colWidth = data.map(row => row.map(val => {
    /*先判断是否为null/undefined*/
    if (val == null) {
      return { 'wch': 10 };
    }
    /*再判断是否为中文*/
    else if (val.toString().charCodeAt(0) > 255) {
      return { 'wch': val.toString().length * 2 + 5 };
    } else {
      return { 'wch': val.toString().length + 5 };
    }
  }))
/*以第一行为初始值*/   
let result = colWidth[0];
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j]['wch'] < colWidth[i][j]['wch']) {
        result[j]['wch'] = colWidth[i][j]['wch'];
      }
    }
  }
  ws['!cols'] = result;

3、配置加载时的路径

在 build 文件夹下的 webpack.base.conf.js 文件下修改，配置要加载时的路径

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': resolve('src/vendor')
    }

4、Export2Excel.js 引用依赖

在 Export2Excel.js 引用依赖如下：

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

element-ui 使用

用了 element-ui 中的 table 和 button 组件，安装依赖：

npm install -S element-ui

在 main.js 中引用 element 及其样式：

import Element from 'element-ui'                    // 引入element ui
import 'element-ui/lib/theme-chalk/index.css'       // 引入 element ui 样式

Vue.use(Element, {
  size: 'mini'                                      // set element-ui default size
})

Vue 文件使用

运行效果图

效果图.png

导出效果图

导出示例图.png