picture

示例

demo 代碼示例

建立項(xiàng)目

vue init webpack excel-export       建立excel-export項(xiàng)目

cd excel-export                     進(jìn)入excel-export文件夾下

npm install                         安裝依賴

npm run dev                         運(yùn)行

導(dǎo)出 Excel 關(guān)鍵

1、安裝依賴

npm install -S file-saver           用來生成文件的web應(yīng)用程序

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

npm install -D script-loader        將js掛載在全局下

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

在 src 目錄下創(chuàng)建一個(gè)文件(vendor) 并添加Blob.js和Export2Excel.js，對 Export2Excel.js 添加了一段代碼，可以使導(dǎo)出的表格列寬自適應(yīng)。所改動(dòng)代碼為 147 - 155 行，具體如下：

/*設(shè)置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、配置加載時(shí)的路徑

在 build 文件夾下的 webpack.base.conf.js 文件下修改，配置要加載時(shí)的路徑

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 文件使用

<template>
  <div class="hello">
    <div>
      <el-button
        type="primary"
        size="mini"
        style="margin:30px auto;"
        @click="handleDownloadData"
      >導(dǎo)出</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 600px;margin:30px auto;"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'excelExport',
  data() {
    return {
      msg: 'Welcome to Your Excel Export',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1510 弄'
        },
        {
          date: '2016-05-04',
          name: '李小虎',
          address: '上海市普陀區(qū)金沙江路 1511 弄'
        },
        {
          date: '2016-05-01',
          name: '孫小虎',
          address: '上海市普陀區(qū)金沙江路 1512 弄'
        },
        {
          date: '2016-05-02',
          name: '朱小虎',
          address: '上海市普陀區(qū)金沙江路 1513 弄'
        },
        {
          date: '2016-05-04',
          name: '錢小虎',
          address: '上海市普陀區(qū)金沙江路 1514 弄'
        },
        {
          date: '2016-05-01',
          name: '杜小虎',
          address: '上海市普陀區(qū)金沙江路 1515 弄'
        },
        {
          date: '2016-05-03',
          name: '趙小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }],
      tableTitleData: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ]
    }
  },
  methods: {
    // 導(dǎo)出的方法
    handleDownloadData() {
      // 導(dǎo)出表格的表頭設(shè)置
      let allColumns = this.tableTitleData
      var columnNames = []
      var columnValues = []
      for (var i = 0; i < allColumns.length; i++) {
        columnNames[i] = allColumns[i].label
        columnValues[i] = allColumns[i].prop
      }
      require.ensure([], () => {
        const { export_json_to_excel } = require('vendor/Export2Excel')
        const tHeader = columnNames
        const filterVal = columnValues

        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '導(dǎo)出excel列表demo')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

運(yùn)行效果圖

效果圖.png

導(dǎo)出效果圖

導(dǎo)出示例圖.png