vue2 项目导出excel表格(一个xlsx文件,多个sheet)

 1.npm install xlsx

<template>
  <div class="hello">
    <h1 >{{ msg }}</h1>
      <div @click="exportXls">下载</div>
  </div>
</template>

<script>
import XLSX from 'xlsx';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
	mounted() {
		console.log("XLSX" + JSON.stringify(XLSX));
	},
	methods:{
 exportXls(){
		const sheet1Data =[{name:'周周',age:24},{name:'张张',age:24}]
		const sheet2Data =[{name:'周周',jobs:'开发'},{name:'张张',jobs:'产品经理'}]
		
		   let sheet1data_china = sheet1Data.map((v) => {
		        return { 姓名: v.name, 年龄: v.age }
		      })
		      let sheet2data_china = sheet2Data.map((v) => {
		        return { 姓名: v.name, 职位: v.jobs }
		      })
					   var sheet1 = XLSX.utils.json_to_sheet(sheet1data_china) //json_to_sheet 将 JS 对象数组转换为工作表。 //aoa_to_sheet 将 JS 数据数组的数组转换为工作表。
					      var sheet2 = XLSX.utils.json_to_sheet(sheet2data_china)
								var wb = XLSX.utils.book_new()
								      XLSX.utils.book_append_sheet(wb, sheet1, '人员统计')
								      XLSX.utils.book_append_sheet(wb, sheet2, '职位表')
								      const workbookBlob = this.workbook2blob(wb)
								
								      this.openDownloadDialog(workbookBlob, `人员名单.xlsx`)
											},
											 workbook2blob(workbook) {
											      // 生成excel的配置项
											      var wopts = {
											        // 要生成的文件类型
											        bookType: 'xlsx',
											        // // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
											        bookSST: false,
											        type: 'binary'
											      }
											      var wbout = XLSX.write(workbook, wopts)
											      // 将字符串转ArrayBuffer
											      function s2ab(s) {
											        var buf = new ArrayBuffer(s.length)
											        var view = new Uint8Array(buf)
											        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
											        return buf
											      }
											      var blob = new Blob([s2ab(wbout)], {
											        type: 'application/octet-stream'
											      })
											      return blob
											    },

											  // 将blob对象创建bloburl,然后用a标签实现弹出下载框
									 openDownloadDialog(blob, fileName) {
											      if (typeof blob == 'object' && blob instanceof Blob) {
											        blob = URL.createObjectURL(blob) // 创建blob地址
											      }
											      var aLink = document.createElement('a')
											      aLink.href = blob
											      // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file:///模式下不会生效
											      aLink.download = fileName || ''
											      var event
											      if (window.MouseEvent) event = new MouseEvent('click')
											      //   移动端
											      else {
											        event = document.createEvent('MouseEvents')
											        event.initMouseEvent(
											          'click',
											          true,
											          false,
											          window,
											          0,
											          0,
											          0,
											          0,
											          0,
											          false,
											          false,
											          false,
											          false,
											          0,
											          null
											        )
											      }
											      aLink.dispatchEvent(event)
											    }
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

引用 :vue多个数据不一样的表格导出到同一张excel里面 - 码农教程

项目运行中控制台出现下方报错信息

vue 使用xlsx出现"export 'default' (imported as 'XLSX') was not found in 'xlsx'报错

解决方法  引用https://www.jianshu.com/p/fd1bd1ddda28

引用:vue多个数据不一样的表格导出到同一张excel里面 - 大熊丨rapper - 博客园

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值