前端vue方法导出为xsml

首先引用xlsx
首先是导出方法

// 导出exportExcel() {// 格式化数据为二维数组this.exportData = this.formatTableData()// 设置表格数据const ws = XLSX.utils.aoa_to_sheet(this.exportData)// 新建一个工作簿const wb = XLSX.utils.book_new()// 设置表格样式，!cols为列宽const options = { '!cols': [] }for (const key in this.tableLabel) {options['!cols'].push({ wpx: this.tableLabel[key] })}ws['!cols'] = options['!cols']// 将工作表添加到工作簿XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')// 输出工作表，由文件名决定的输出格式const fileNamePrefix = this.unitTestCoverObj.applicationNameconst time = getFullTime(null, true).replace(/-/g, '')const fileName = `${fileNamePrefix}${time}.xlsx`XLSX.writeFile(wb, fileName)this.$message({type: 'success',message: '导出成功'})}

格式化数据为二维数组

// 数据格式为二维数组formatTableData() {const data = []let tableRef = nulltableRef = this.$refs.unitTestCoverTabledata.push(...this.unitTestCoverData)if (!tableRef) {console.error('找不到表格组件ref')return []}const array = []array[0] = []this.tableLabel = {}for (const obj of tableRef.columns) {if (obj.type === 'index') {array[0].push('序号')this.tableLabel['index'] = obj.width} else {array[0].push(obj.label)this.tableLabel[obj.property] = obj.width || obj.minWidth || obj.realWidth || 100}}data.forEach((item, index) => {const subArray = []for (const head of Object.keys(this.tableLabel)) {if (head === 'index') {subArray.push(index + 1)continue}if (item[head] !== undefined) {if (head === 'coverage' || head === 'branchCoverage') {subArray.push(`${item[head]}%`)} else {subArray.push(`${item[head]}`)}} else {subArray.push('')}}array.push(subArray)})console.log(array)return array}

console到控制台看一眼是这样的：
第一组对象为xsml表格第一排

前端vue方法导出为xsml相关推荐

vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出 exportData () { this.$confirm('确认导出XXXXXX?', { confirmButtonText: '导出', cancelButtonText: '取消' ...
前端vue实现导出功能：当后端给你返回的是文件流时，你要如何导出？
前言: 当有一个需求,让你导出文件.后台有时候会给你返回一个下载链接,做个按钮点一下发个请求就ok了但如果给你返回文件流,我们要怎么对文件流处理呢? 解决方案: 话不多说.我们直接上代码:从axio ...
java后端导出excel文件流，前端vue接收下载
1.后端excel导出工具类主要依赖 <dependency><groupId>cn.hutool</groupId><ar ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
vue中导出json数据为excel表格并保存到本地
继我上次成功利用vue和elemen把excel的数据导入至前端vue,因为excel表中的数据有些必填项没有填写或者填写错误(比如写错字)所以就要将没有成功导入的数据导出成一份excel表并保存至本 ...
大前端-Vue源码分析
Vue源码解析-响应式原理以下内容来自拉勾教育大前端训练营笔者在学习过程中对笔记进行的一个整理心得体会嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...

前端vue方法导出为xsml

前端vue方法导出为xsml相关推荐

最新文章

热门文章