vue项目导出电子表格

方法一：

一、安装依赖（前面基本一样）

npm install file-saver --save

npm install xlsx --save

npm install script-loader --save-dev

二、下载两个所需要的js文件Blob.js和 Export2Excel.js

这里贴下下载地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias：

'vendor': path.resolve(__dirname, '../src/vendor')

五、在.vue文件中
script部分

data(){

  return{

    myTable:[

        {

          no: 1,

          goodsName:'哇哈哈',

          number:2,

          price:16,

          customerName:'柳生',

          phone:18976545678,

      },

      {

          no:2,

          goodName:'棒棒糖',

          number:5,

          price:10,

          customerName:‘张三’,

          phone:18166754345,

      },

    ]

  }

methods:{

    formatJson(filterVal, jsonData) {

    　　　　return jsonData.map(v => filterVal.map(j => v[j]))

    　　},

    export2Excel() {

    　　　　require.ensure([], () => {

    　　　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel');

    　　　　　　const tHeader = ['序号', '商品名称', '数量', '单价', '会员姓名', '手机号码'];
　　　　　　　　 const filterVal = ['no', 'goodsName', 'number', 'price', 'customerName', 'phone']

    　　　　　　const list = this.myTable;

    　　　　　　const data = this.formatJson(filterVal, list);

    　　　　　　export_json_to_excel(tHeader, data, '商品管理列表');

    　　　　})

    　 }

}

方法二：

import XLSX from 'xlsx'

data() {
　return {
   list: [

['序号', '消课时间', '操作人', '课程信息', '', '', '', '', '', '客户信息', '', '上课信息', '', '备注'],

['', '', '', '课程名称', '教练名称', '课程价格', '课程次数（剩/总)', '应付金额', '实付金额', '会员姓名', '手机号码', '实际带课教练', '消课单价', '']

]

}

},
methods: {

aaa() {

  var arr = this.list

  let mergesArr = []

  arr[0].forEach((item, index) => {

    if (item) {

      mergesArr[mergesArr.length] = {

        s: {},

        e: {}

      }

      mergesArr[mergesArr.length - 1].s.c = index

      mergesArr[mergesArr.length - 1].s.r = 0

      mergesArr[mergesArr.length - 1].e.c = index

      mergesArr[mergesArr.length - 1].e.r = 0

    } else {

      mergesArr[mergesArr.length - 1].e.c = index

    }

  })

  mergesArr.forEach((item, index) => {

    if (arr[1][item.e.c] === '') {

      mergesArr[index].e.r = 1

    }

  })

  return mergesArr

},

printPages(wscols, xlsxName) {

  const ws = XLSX.utils.aoa_to_sheet(this.list)

  ws['!cols'] = [{ wch: 5 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 10 }]

  ws['!merges'] = this.aaa()

  const wb = XLSX.utils.book_new()

  XLSX.utils.book_append_sheet(wb, ws, '商品管理列表')

  /* generate file and send to client */

  XLSX.writeFile(wb, '商品管理列表' + '.xlsx')

}
}

巴特西

vue项目导出电子表格

最新文章

热门文章