位置: IT常识 - 正文

vue框架使用xlsx导出excel表格(vue框架教程视频)

编辑:rootadmin
vue框架使用xlsx导出excel表格

推荐整理分享vue框架使用xlsx导出excel表格(vue框架教程视频),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue框架教程视频,vue框架教程视频,vue-xlsx,vue框架用什么软件写,vue框架教程视频,Vue框架使用session怎么用,Vue框架使用了MVC设计模式,Vue框架使用了MVC设计模式,内容如对您有帮助,希望把文章链接给更多的朋友!

刚接手一个项目,需要做表格导出,之前没用过,特做此记录,以备下次使用。此模板适用于修改表格样式时使用,若只想简单的直接导出,可以参考另一篇:在vue中,使用xlsx配合FileSaver进行导出excel表格_郭小白呀的博客-CSDN博客

看到一篇文章,受益匪浅:如何使用JavaScript实现纯前端读取和导出excel文件-好记的博客

此项目中的表格数据 使用的是element ui 中的table 导入的,所以导出也是直接将已生成的表格导出为excel

表格导出的基本模板过程

1. 先下载插件

npm i xlsxnpm i xlsx-style

2. 在使用的页面中导入

import XLSX2 from 'xlsx'import XLSX from 'xlsx-style'

3. 绑定要导出的表格,并设置列宽(不同内容的导出方式是不同的,这里直接是将表格导出为excel文件,用的是 utils.table_to_sheet,其他的用到了再补充)

这里对表格有无数据的判断,请看下边遇到的问题第三个来写!!!

var wb = XLSX2.utils.table_to_sheet(document.querySelector('#mytable'))// mytable为表格的id名 if (!wb['!merges']) { this.$message.warning('无法导出:报表无数据') return } // 设置列宽(这里用到列的数量是用来设置不同列的不同宽度的) const sum = 1 + this.govMt.length * 7 + 2 // 列的数量,根据自身项目进行数据的更改 for (var i = 0; i < sum; i++) { if (i === sum - 1) { wb['!cols'][i] = { wpx: 120 } // 设置列宽,只有最后一列的宽度是不同的 } else { wb['!cols'][i] = { wpx: 60 } } }

4. 设置单元格的样式

for (const key in wb) { if (key.indexOf('!') === -1) { // 排除带!的字段,只要单元格字段 wb[key].s = { font: {// 字体设置 sz: 13, bold: false, color: { rgb: '000000'// 十六进制,不带# } }, border: { // 设置边框 top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } }, alignment: {// 文字居中 //字体水平居中、垂直居中、自动换行 horizontal: 'center', vertical: 'center', wrap_text: true } } } }

基础设置就是这样, 然后调用后边的三个函数即可

var data = this.addRangeBorder(wb['!merges'], wb) // 合并项添加边框var filedata = this.sheet2blob(data) // 将一个sheet转成最终的excel文件的blob对象this.openDownloadDialog(filedata, '报表名字.xlsx') // 下载报表

5. 由于有合并的单元格,所以要为 合并项 添加边框,具体解释看文末遇到的问题中的四!!

// 为合并项添加边框 addRangeBorder(range, ws) { const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] range.forEach(item => { const startColNumber = Number(item.s.r); const endColNumber = Number(item.e.r) // 0-0 const startRowNumber = Number(item.s.c); const endRowNumber = Number(item.e.c) // 0-16 const test = ws[arr[startRowNumber] + (startColNumber + 1)] // 合并项第一个单元格中的内容 for (let col = startColNumber; col <= endColNumber; col++) { // 0-0 for (let row = startRowNumber; row <= endRowNumber; row++) { // 0-16 ws[arr[row] + (col + 1)] = test // A1-P1 } } }) return ws },

6. 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载

// 将一个sheet转成最终的excel文件的blob对象sheet2blob(sheet, sheetName) { // console.log(sheet, sheetName, 'sheet, sheetName') sheetName = sheetName || 'sheet1' console.log(sheetName, 'sheetName') var workbook = { SheetNames: [sheetName], Sheets: {} } workbook.Sheets[sheetName] = sheet // 生成excel的配置项 var wopts = { bookType: 'xlsx', // 要生成的文件类型 bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性 type: 'binary' } var wbout = XLSX.write(workbook, wopts) var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) // 字符串转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 } return blob },

利用URL.createObjectURL下载 函数

openDownloadDialog(url, saveName) { if (typeof url === 'object' && url instanceof Blob) { url = URL.createObjectURL(url) // 创建blob地址 } var aLink = document.createElement('a') aLink.href = url aLink.download = saveName || '' // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效 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) }遇到的问题: 一、在使用xlsx-style导出的时候,可能会报如下错误:Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx\xxx

或者在npm run serve时出现:

This relative module was not found:  * ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

解决方式有两种:

1. 在config.js中加入如下代码:

module.exports = {externals: { './cptable': 'var cptable' }}

这段代码要写进config.js中,我发现我并没有这个文件(我用的是vue2.0),所以要在根目录中创建vue.config.js文件,并在内部写如下代码:

module.exports = { devServer: { port: 80, host: '0.0.0.0', },};vue框架使用xlsx导出excel表格(vue框架教程视频)

这时,我将externals: { './cptable': 'var cptable' }直接写进 module.exports 中,

module.exports = { devServer: { port: 80, host: '0.0.0.0', }, externals: { './cptable': 'var cptable' }};

 出现了如下错误:

ERROR  Invalid optio

.0ns in vue.config.js: "externals" is not allowed

意思是vue.config.js里面没有这个字段,所以配置的这个webpack字段vue并没有把它映射到vue.config.js中。所以我们要换一种引用方式:

configureWebpack: { externals: {'./cptable': 'var cptable'} } // 配置webpack的字段。

然后再重新运行就可以了。

2. 第二种方式是修改 node_modules 中的代码,但是,每次拉取代码 npm i 后,都要去修改,这样是很不方便的。

  找到 ./node_modules/xlsx-style/dist/cpexcel.js 文件手动修改

将var cpt = require('./cpt' + 'able'); 替换为var cpt = cptable; 二、vue xlsx导出表格时间不全问题

可能为:进入时间一列显示年月日,时分秒被忽略掉、有个别显示####

 解决方式:

在代码中添加:{ raw: true }

var wb = XLSX2.utils.table_to_sheet(document.querySelector('#exportTab'), { raw: true })// exportTab为表格的id名

效果图:

三、在代码的 3. 中,报表无数据的判断是可以灵活改变的

如下代码段是用来判断有没有合并项的,如果没有单元格合并,是不会有此选项的,所以就算表格中有数据,也会一直走无法导出的代码,所以可以再从wb中换一个字段来判断。例如: !fullref

若有合并项可以写为:

if (!wb['!merges']) { this.$message.warning('无法导出:报表无数据') return }

根据需要可以改写为:

if (!wb['!fullref']) { this.$message.warning('无法导出:报表无数据') return }四、 对于合并项函数的需求解答

当我们的单元格是合并单元格时,如果不对合并项添加边框,导出的表格效果如图所示:

我们发现合并项的边框是有缺失的,在我们调用为合并项添加边框函数后,就可解决这个问题,效果图如下所示:

 

本文链接地址:https://www.jiuchutong.com/zhishi/297463.html 转载请保留说明!

上一篇:CSDN芒果独家原创YOLOv5改进、YOLOv7改进(适用YOLOv8改进)专栏 | 《芒果YOLO改进系列进阶指南》来自人工智能专家老师联袂推荐(芒果sdk)

下一篇:vue2和vue3区别(vue2和vue3区别面试题)

  • 一般纳税人的进销项税怎么做分录
  • 怎么修改金税盘登录密码
  • 企业的罚款支出包括违约金吗
  • 税后经营净利润加折旧与摊销
  • 个人所得税怎么扣
  • 制造费用影响当期损益的科目
  • 税金及附加包括什么
  • 出口退免税备案
  • 不动产租赁发票怎么开
  • 转让无形资产增值税
  • 特许权使用费计算公式
  • 收到捐赠货物的会计分录怎么写
  • 结转累计折旧分录
  • 事业单位盘亏资产的处理
  • 债务重组是什么意思?
  • 生产企业原材料的订购与运输论文
  • 会计人员应掌握的知识
  • 企业会计准则基本准则的主要内容
  • 个税申报系统在哪里撤销更正
  • 增值税专用发票几个点
  • 公司购买房产的税费
  • 地产商自持是什么意思
  • 建筑企业无票支出如何处理
  • 关于递延所得税的例题
  • 抵扣进项税有期限吗
  • 现金预算在企业财务管理中是何地位
  • 员工福利没有发票
  • 企业识别码怎么查询
  • 房地产企业闲置土地怎么处理
  • 留抵税额算进项税额吗
  • 质权的成立时间为
  • 允许企业所得税税前扣除的公益性捐赠的条件包括
  • win10播放视频软件
  • imac夜间模式
  • macos快捷键一览
  • PHP:pg_field_type()的用法_PostgreSQL函数
  • php curd
  • 贸易公司和生产厂家怎么合作能够双赢
  • 政府代建项目税收政策
  • 深度学习分析NASA电池数据(1 数据读取)
  • 深度学习参数初始化(二)Kaiming初始化 含代码
  • php中input的用法
  • 企业所得税是填本年累计数吗
  • 传统结算工具的不足有
  • 企业所得税月月交吗
  • 自产产品用于福利账务处理
  • 结转入库材料计什么科目
  • 暂估价与发票价的区别
  • php判断https
  • PostgreSQL教程(一):数据表详解
  • 如何关闭mysqld
  • 建筑业无票收入收货款分录
  • 房地产资质代办需要多少钱
  • 转让不动产怎么计算增值税
  • 施工企业项目部发生的管理人员工资应计入
  • 库存商品盘盈和盘亏区别
  • 金税盘离线开票时间超限的处理方法
  • 车票抵扣税款
  • 红字发票怎样记账
  • sqlserver代理服务启动失败
  • 怎么修改注册表的权限
  • 英特尔双核cpu
  • ubuntu启动菜单 哪个键
  • Linux系统复制图片
  • solaris删除文件命令
  • win8系统安装WPS
  • 苹果系统怎么修改位置
  • win7系统怎么禁用数字签名
  • js实现图片放大功能
  • 基于jquery实现可定制的web在线富文本编辑器附源码下载
  • android 自定义
  • 原生js实现promise
  • shaders initialized
  • 2015年5-6月关于Android用户隐私保护的3篇顶级论文【2015.5-2015.6】
  • android开发模式
  • opencv识别结果输出
  • js如何判断是否有定时器功能并清除
  • 交警认可的客货两用车型
  • 国家税务总局中山市税务局港口税务分局
  • 对金融机构与小型企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设