首页 > 其他分享 >xlsx.js导出表格

xlsx.js导出表格

时间:2023-05-09 10:22:08浏览次数:35  
标签:xlsx wpx wb 表格 XLSX worksheet js 80

说明

vue2
前端导出表格需用用到xlsx.js这个库

npm install xlsx

实现操作

合并单元格
把数组导出成excel

代码部分

wch

import * as XLSX from "xlsx";//记得在要用的页面导入
 /* 导出表格 */
exportExcel_() {
	/* 定义表格的数据 第一行是表头*/
	var data = [
		["名称", "数量", "价格",'指标(月度形象进度及投资)','','',''],
		["笔记本电脑", 10, 5000,'妇科大夫','拉过来'],
		["平板电脑", 20, 3000,'12345678','接口规范'],
		["手机老公就分开了国家分开了国家", 30, 2000,'甘就分开感觉','赶快']
	];

	/* 创建一个工作簿 */
	var workbook = XLSX.utils.book_new();

	/* 把数据添加到一个工作表中 */
	var worksheet = XLSX.utils.aoa_to_sheet(data);
	/* 设置单元格的行高和列宽 */
	worksheet["!cols"] = [
		{ wch: 30}, // 1个字母数字代表1个字符,1个中文代表2个字符
		{ wpx: 80 }, // 列宽为80像素
		{ wpx: 80 },
		{ wch: 16 },
		{ wpx: 80 },
		{ wpx: 80 },
		{ wpx: 80 }
	];

	worksheet["!rows"] = [
		{ hpt: 20 }, // 行高为20 我目前测试两个hpt hpx 好像差不多,可以自行测试
		{ hpx: 30 }, // 行高为30像素
		{ hpx: 100 } 
	];
	//合并单元格操作 要合并的单元格范围 ,s代表起始,e代表结束,
	worksheet['!merges'] = [
		// 相当于  c1到G1D 合并,合并单元格记得合并掉的也要用''代替
		{ s: { r: 0, c: 3 }, e: { r: 0, c: 6 } }, 
	];

	const wb = XLSX.utils.book_new();
	console.log('wb',wb);
	/* 把工作表添加到工作簿中 */
	XLSX.utils.book_append_sheet(wb, worksheet, "Sheet1");

	/* 导出工作簿 */
	XLSX.writeFile(wb, "data.xlsx");
}

标签:xlsx,wpx,wb,表格,XLSX,worksheet,js,80
From: https://www.cnblogs.com/tn666/p/17384096.html

相关文章

  • 【内存分析】用于内存分析定位的指令 jmap, jstat, jinfo, jstack
    用于内存分析定位的指令/工具有:jmap,jstat,jinfo,jstackjmap(1)分析进程中的内存使用情况,是多少个什么样的对象占用了多大的内存,这类型的分析(2)也可以导出堆转储文件,导出后,再来分析jstack这个是看cpu的,看各个线程的执行状态,如果cpu比较高,就是用jstack来定位分析......
  • js中找出对象中值最大的一项
    比如有以下对象constobj={num1:1000,num2:800,num3:900,}期望得到num1:1000这一项。js实现代码:exportconstmaxIncome=(userWalletIncomes)=>{letmaxValue=0;letmaxKey='';for(const[key,value]ofObject.entries(userWalletIncom......
  • 使用 nodejs 从 0 实现简单易用的代理功能之 config.proxy
    从0实现config.proxyconfig.proxy类似于webpack的devServe中的代理,但更直观易用.本文为mockm的实现过程,编写此系列文章1是为了抛砖引玉,让想实现类似工具的朋友可以一起学习.2是也给自己做一个简单梳理.类型:string|object默认:http://www.httpbin.or......
  • 【nodejs基础】Express、路由、中间件详解04
    一、Express简介Express是基于Node.js平台,快速、开放、极简的Web开发框架通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。本质就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法中文官网http://www.expressjs.com.cn......
  • Mac安装node.js开发环境的详细步骤
    1.官网下载node.js下载地址:https://nodejs.org/  直接点击下载即可。2.双击刚下载的文件,默认点继续安装就行。3.安装完成后,打开终端,输入“npm-v”和“node-v”两个命令,如下图出现版本信息,说明安装成功。 4.进行环境配置打开终端,输入“open-e.bash_profile”回车,在......
  • JS之根据两地经纬度获得两点之间的距离
    JS之根据两地经纬度获得两点之间的距离:constgetDistance=(lat1,lng1,lat2,lng2)=>{lat1=lat1||0;lng1=lng1||0;lat2=lat2||0;lng2=lng2||0;varrad1=(lat1*Math.PI)/180.0;varrad2=(lat2*Math.PI)/180.0;vara=ra......
  • jsp
        ......
  • 使用 HTTP/2 加速 Node.js 应用
    我们想让现今使用Node.js构建的网站能够更加轻松的获得性能提升。为此,我们开发了netjet中间件,它可以解析应用生成的HTML并自动添加Link头部。当在一个示例的Express应用中使用这个中间件时,我们可以看到应用程序的输出多了如下HTTP头:本文是使用Ghost(一个博客发......
  • QT5 QJson与QString相互转换
    QT5QJson与QString相互转换QString转QJsonQJsonObjectMainWindow::QstringToJson(QStringjsonString){QJsonDocumentjsonDocument=QJsonDocument::fromJson(jsonString.toLocal8Bit().data());if(jsonDocument.isNull()){qDebug()<<"StringNULL&......
  • NestJs 使用 RabbitMQ
    既然是使用RabbitMQ那先不管其他的把RabbitMQ装上再说RabbitMQ安装这里直接找他们官网就行https://www.rabbitmq.com/download.html这里我们选择使用docker安装快捷方便这里直接参考:https://juejin.cn/post/7198430801850105916我们要站在巨人的肩膀上,快速学习,具......