vue项目导出电子表格
阅读原文时间:2023年07月15日阅读:3

方法一:

一、安装依赖(前面基本一样)

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') } }

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章