首页 > 其他分享 >vue xlsx组件 导出的excel表头插入内容

vue xlsx组件 导出的excel表头插入内容

时间:2023-06-01 17:57:55浏览次数:60  
标签:origin xlsx vue sheet 表格 XLSX dom 表头 timeData

主要就是sheet_add_dom这个方法, dom是带有table标签元素的dom节点。 timeData是个二维数组:[["条件1","条件2"],["值1","值2"]]; 如果是要在表格内容行里面插入内容,可以直接在与表格绑定的对象上,插入内容就可以了。

/*timeData 是二维数组*/
  getExcelWithInfo(timeData,dom, title = '默认标题', fn = () => {})
  {
    //得到一个worksheet对象
    //var data =[["按单据日期", "开始时间:", "2023-5-12", "结束时间:", "2023-5-31"]];
    const ws = XLSX.utils.aoa_to_sheet(timeData);

    //追加一个表格dom到 worksheet对象
    //origin 默认值是从表格的最开始即A1开始追加,会覆盖前一个表格
    //origin:-1 表示从上一个表格的末尾行追加
    //origin: {c:4, r:0} cellAddress 会从这个单元格的位置开始追加
    XLSX.utils.sheet_add_dom(ws, document.querySelector(dom), { origin: -1,raw: true })//原样格式

    let wb = XLSX.utils.book_new()

    var filename = title + ".xlsx"
    XLSX.utils.book_append_sheet(wb, ws, 'sheet1')
    let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array', bookSST: true, })
    fn && fn()
    try
    {
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
    }
    catch (e)
    {
      if (typeof console !== 'undefined') console.log(e, wbout)
    }
    return wbout
  },

 

标签:origin,xlsx,vue,sheet,表格,XLSX,dom,表头,timeData
From: https://www.cnblogs.com/HelloQLQ/p/17449759.html

相关文章

  • vue介绍和基本使用,插值语法,文本指令和事件指令
    1前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 -javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求......
  • vue2项目中使用dhtmlx gantt甘特图插件
    官网示例地址:https://docs.dhtmlx.com/gantt/samples/可以在这里查看绑定数据的格式安装依赖npminstalldhtmlx-gantt--save创建一个甘特图组件<template><el-scrollbarref="gantt_scrollbar"class="gantt-box"><divref="gantt"class=&qu......
  • vue3实现元素监听滚动事件
    //useScroll.jsimport{debounce}from'@/common/util.js'exportdefaultfunctionuseScroll(elRef){console.log('########3useScroll',elRef.value)letel=windowconstisReachBottom=ref(false)constclientHeight=ref(0......
  • VuePress2.0构建项目文档系统
    VuePress2.0构建项目文档系统参考TerraMours官网。https://terramours.site/文件结构参考:1.修改首页README.md修改项目下的README.md,修改内容:---home:trueheroImage:images/hero.pngheroText:TerraMoursactions:-text:快速开始link:/guide/type:pr......
  • 使用vue的简单的纯前端JS验证码实现
    使用vue的简单的纯前端JS验证码实现感觉人不能在SQL里面淹死,得看看别的东西了因为是上班摸鱼偷摸搞的,所以人比较懒,很多东西也懒得修修改改,直接放在一个html文件下了页面如下js的生成图形逻辑是21年毕业的时候百度CV的,出处是找不到了<!DOCTYPEhtml><htmllang="en"><head......
  • 前后端分离的架构,前端使用Vue2.6.10,后端使用SpringBoot2.0.0的ERP实现
    技术架构技术框架:SpringBoot2.0.0+Mybatis1.3.2+SLF4J1.7+Vue2.6.10+Ant-Design-Vue1.5.2+Mysql5.7+Redis运行环境:jdk8+IntelliJIDEA+maven+宝塔面板本地部署:1.小皮面板创建一个数据库,导入jsh_erp.sql文件至数据库中,该文件在后端程序的docs文件夹下。2.使用......
  • Vue3 尝试小记
    1.安装vue使用npm或yarn安装Vue3:#npmnpminstallvue@next#yarnyarnaddvue@next2.创建项目文件夹在命令行中,输入以下命令,在根目录下创建一个项目文件夹:mkdirmy-vue3-project3.初始化package.json使用npminit命令,在该目录中创建package.json文件:npm......
  • react项目,或者vue项目。手动隐藏warning。保持控制台的清晰
    非常感谢您的指正和提醒,我的回答中使用了arguments对象,而这不是一个好的实践。可以使用ES6的剩余参数(restparameters)来代替arguments对象。以下是使用剩余参数替换arguments对象的示例代码:importReactfrom'react';importReactDOMfrom'react-dom';constconsol......
  • Vue通用下拉树组件@riophae/vue-treeselect的使用
    vue-treeselect是一款下拉树通用组件。@riophae/vue-treeselect是一个基于Vue.js的树形选择器组件,可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能,可以自定义选项的样式和模板。该组件易于使用和扩展,适用于各种类型的项目。npm:https://www.npmjs.com/package/@......
  • vues全局使用WebSocket 多次吊起
    //import{showInfoMsg,showErrorMsg}from'@/utils/popInfo'//importElementUIfrom'element-ui';import{Toast}from'vant';functioninitWebSocket(that,baseObj){console.log(baseObj)console.log(this)co......