document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>")
var ocolorPopup = window.createPopup()
var ecolorPopup=null
function colordialogmouseout(obj){
obj.style.borderColor=""
obj.bgColor=""
}
function colordialogmouseover(obj){
obj.style.borderColor="#0A66EE"
obj.bgColor="#EEEEEE"
}
function colordialogmousedown(color){
ecolorPopup.value=color
//document.body.bgColor=color
ocolorPopup.document.body.blur()
}
function colordialogmore(){
var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value)
sColor = sColor.toString(16)
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length)
sColor = sTempString.concat(sColor)
}
ecolorPopup.value="#"+sColor.toUpperCase()
//document.body.bgColor="#"+sColor.toUpperCase()
ocolorPopup.document.body.blur()
}
function colordialog(){
var e=event.srcElement
e.onkeyup=colordialog
ecolorPopup=e
var ocbody
var oPopBody = ocolorPopup.document.body
var colorlist=new Array(40)
oPopBody.style.backgroundColor = "#f9f8f7"
oPopBody.style.border = "solid #999999 1px"
oPopBody.style.fontSize = "12px"
colorlist[0]="#000000" colorlist[1]="#993300" colorlist[2]="#333300" colorlist[3]="#003300"
colorlist[4]="#003366" colorlist[5]="#000080" colorlist[6]="#333399" colorlist[7]="#333333"
colorlist[8]="#800000" colorlist[9]="#FF6600" colorlist[10]="#808000"colorlist[11]="#008000"
colorlist[12]="#008080"colorlist[13]="#0000FF"colorlist[14]="#666699"colorlist[15]="#808080"
colorlist[16]="#FF0000"colorlist[17]="#FF9900"colorlist[18]="#99CC00"colorlist[19]="#339966"
colorlist[20]="#33CCCC"colorlist[21]="#3366FF"colorlist[22]="#800080"colorlist[23]="#999999"
colorlist[24]="#FF00FF"colorlist[25]="#FFCC00"colorlist[26]="#FFFF00"colorlist[27]="#00FF00"
colorlist[28]="#00FFFF"colorlist[29]="#00CCFF"colorlist[30]="#993366"colorlist[31]="#CCCCCC"
colorlist[32]="#FF99CC"colorlist[33]="#FFCC99"colorlist[34]="#FFFF99"colorlist[35]="#CCFFCC"
colorlist[36]="#CCFFFF"colorlist[37]="#99CCFF"colorlist[38]="#CC99FF"colorlist[39]="#FFFFFF"
ocbody = ""
ocbody += "<table CELLPADDING=0 CELLSPACING=3>"
ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px\" align=\"center\">当前颜色</td></tr>"
for(var i=0i<colorlist.lengthi++){
if(i%8==0)
ocbody += "<tr>"
ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid\" onMouseOut=\"parent.colordialogmouseout(this)\" onMouseOver=\"parent.colordialogmouseover(this)\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>"
if(i%8==7)
ocbody += "</tr>"
}
ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this)\" onMouseOver=\"parent.colordialogmouseover(this)\" style=\"border:1px solidfont-size:12pxcursor:default\" onMouseDown=\"parent.colordialogmore()\">其它颜色...</td></tr>"
ocbody += "</table>"
oPopBody.innerHTML=ocbody
ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body)
}
//-->
</script>
<input name="table_danyuan" type="text" onfocus="colordialog()" value="">
yehaocheng520
码龄3年
关注
之前写过一篇博客,是关于elementUi—table组件+xlsx插件实现导出——sheetJs的,之前实现的功能有:
根据dom获取内容
创建工作簿
调整单元格的宽度
实现百分数的展示
插入到工作表中
导出到浏览器中
博客地址如下:
elementUi—table组件+xlsx插件实现导出——sheetJs:https://blog.csdn.net/yehaocheng520/article/details/123554455?spm=1001.2014.3001.5501
但是上面的并不能完全满足用户的需求,用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。
此时单纯的引入sheetJs是不能满足要求了,此时还需要一个xlsx-js的文件,专门用于处理sheetJs的样式问题。
我从网上找了好久,终于找到了对应的文件。
特别感谢大神的链接:
使用js-xlsx纯前端导出excel:https://www.likecs.com/show-203708170.html
上面的地址内容超级详细,而且一步步的将内容引出并提供解决方案,这才是一篇好的技术博客,赞!!!
直接上解决办法,有空的同学可以仔细阅读上面的博客链接。
1. 引入两个js——xlsx.extendscript.js和xlsx.full.min.js
这两个文件其实可以通过使用npm的方式来安装到本地,然后就能从本地文件中找到响应的js了。
1.1 通过npm install xlsx
安装后dist文件夹下有一个文件xlsx.extendscript.js,引入到项目中
1.2 通过npm install xlsx-style
安装后dist文件夹下有一个文件xlsx.full.min.js,引入到项目中
大神提供的技术博客中,还提供了一个关于导出的封装后的js,叫export.js文件。这个文件中的内容并不多,可以单独引入,也可以直接将函数拷贝到页面上,我是直接拷贝的。下面会讲到。
2.上面的两个js暴漏出来的变量有冲突,都是XLSX,此时需要更改其中一个的变量
大神是直接更改的第一个文件的变量,我们可以直接跟随大神的操作步骤处理,防止出现不必要的麻烦。
下面介绍使用的详细步骤:
3.详细使用步骤
3.1 通过ref获取页面上的table组件
var table_dom = this.$refs['table1'].$el
1
1
3.2 设置开头空几行属性,不需要空则设置为0行
var opt = {
rowIndex: 0
}//开头空0行
const new_sheet = XLSX2.utils.table_to_sheet(table_dom, opt)
1
2
3
4
1
2
3
4
3.3 设置单元格的居中及字号
for (let key in new_sheet) {
if (key.indexOf('!') !== 0) {
if (key == 'A1') {
new_sheet[key]['s'] = {
font: {
sz: 20,//设置标题的字号
bold: true,//设置标题是否加粗
},
alignment: { horizontal: 'center', vertical: 'center', wrapText: true },//设置标题水平竖直方向居中,并自动换行展示
fill: {
fgColor: { rgb: 'ebebeb' }//设置标题单元格的背景颜色
}
}
} else {
new_sheet[key]['s'] = {
font: {
sz: 10,
},
alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上面的代码:如果是A1则表示是第一行,我这边的第一行是合并单元格后的标题部分
1. `font`:设置的是字体方面的样式
2. font>>>sz:设置的是字号
3. font>>>bold:字体加粗
4. alignment:设置单元格的居中及自动换行
5. alignment>>>horizontal:水平是否居中
6. alignment>>>vertical:竖直是否居中
7. alignment>>>wrapText:是否换行展示内容
8. fill:设置单元格的背景色等
9. fill>>>fgColor:设置背景色
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
3.4 设置单元格的宽度,此时需要每个单元格都进行设置
new_sheet['!cols'] = [
{ wpx: 40 }, { wpx: 40 }, { wpx: 40 }, { wpx: 60 }, { wpx: 100 } }
]
1
2
3
1
2
3
如果相同的宽度比较多,则可以通过new Array.(20)fill({wpx:xxx})的方式来一次性添加20个相同的宽度,这样会简单一些。
3.5 添加百分数——%,需要提前确定是哪几列需要添加%,然后遍历时单独处理
for (let key in new_sheet) {
console.log(key, new_sheet[key])
if (key.indexOf('S') == 0 || key.indexOf('T') == 0 || key.indexOf('U') == 0 || key.indexOf('V') == 0) {
new_sheet[key]['z'] = '0.00%'
}
}
1
2
3
4
5
6
1
2
3
4
5
6
3.6 将工作簿添加到工作表中
XLSX2.utils.book_append_sheet(new_book, new_sheet, '出库日报')
1
1
3.7 导出工作表
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
}
var wbout = XLSX.write(new_book, wopts)
var blob = new Blob([this.s2ab(wbout)], {
type: "application/octet-stream"
})// 字符串转ArrayBuffer
// 导出excel文件 如导出后的文件不能打开,请将后缀替换为 .xls
this.openDownloadDialog(blob, `(${this.getDateString(new Date())})广德云仓出库报表.xlsx`)
// 导出excel文件 如导出后的文件不能打开,请将后缀替换为 .xls
},
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
上面用到了this.s2ab方法:
s2ab(s) {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0i != s.length++i) view[i] = s.charCodeAt(i) &0xFF
return buf
},
1
2
3
4
5
6
1
2
3
4
5
6
还用到了openDownloadDialog
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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
完成!!!
导出的excel如下:
打开CSDN APP,看更多技术内容
xlsx-style使用(导出表格及修改单元格样式)_Exclison的博客
单元格对象(Cell Object) 可以使用单元格对象来实现对单元格样式对修改,最终导出是一定要使用xlsx-style的方法导出 //利用xlsxjs获取sheet对象,datalist为格式化好的导出的数据varws=XLSX.utils.json_to_sheet(dataList)ws['!cols']=c...
继续访问
Vue使用xlsx和xlsx-style纯前端导出带样式的Excel_马大头的博客-CSDN博 ...
用npm install xlsx-style --save命令可能会安装失败,所以推荐使用cnpm install xlsx-style --save命令进行安装,安装好后不出意外程序会报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx,解决方法网上搜索即可,如在vue....
继续访问
js生成excel样式文件xlsx.full.min.js
js生成excel和设置样式文件xlsx.full.min.js,需要的人自然会懂,需要的人自然会懂,需要的人自然会懂,需要的人自然会懂,需要的人自然会懂。
xlsx-style使用(导出表格及修改单元格样式)
xlsx-style使用(导出表格及修改单元格样式) 针对导出表格 需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式 安装 npm install xlsx-style --save vue安装后导入可能会报错 Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx 这里附一个解决方案xlsx-style报错 编写工作簿 /* 文件类型 bookType 可以是 'xlsx' or 'xlsm' or 'xlsb' */ va
继续访问
xlsx、xlsx-style、file-saver导表_too_money的博客_npm insta...
vue 利用xlsx、xlsx-style、file-saver实现前端导出excel表格 (包括设置单元格居中、边框等样式) antdesignvue、elementui、vxetable 等都适用 导出的excel: 首先要引入三个库: npm install file-saver --save npm install xlsx --save...
继续访问
xlsx xlsx-style 设置导出的exce表格样式_十里顾情欢的博客_x...
无论用xlsx还是xlsx-style都可以设置样式但下载一定要用xlsx-style里面的write()方法,只有这样导出的excel表格样式才会生效 // 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载exportfunctionsheet2blob(sheet,sheet...
继续访问
前端根据后端返回数据导出指定样式的表格(xlsx-js-style)
根据后台返回的数据生成指定样式的excel,使用xlsx-style一直报错,有关xlsx-js-style的文章也比较少,设置样式的时候踩过不少坑,因此整合了一下使用xlsx-js-style修改表格样式的方法,包括修改表头、列表、行高、列宽、字体、边框等等,应该是比较全面的
继续访问
elementUi—table组件+xlsx插件实现导出——sheetJs——前端实现表格的导出功能——技能提升
elementUi—table组件+xlsx插件实现导出——sheetJs——前端实现表格的导出功能
继续访问
...纯前端导出excel并完成各种样式的修改(xlsx-style)_前端导出excel设 ...
7、出现的错误修复完毕,开始针对性的对不完整的xlsx-style进行扩展,首先第一点,找到xlsx-style目录下的xlsx.js,找到defaultCellStyle,由命名可知,defaultCellStyle是所有单元格的默认样式,我们把它改成我们所需要的整体样式,这样可以大大的减...
继续访问
【笔记】Vue中 xlsx-style 导出样式excel的学习和使用_vue xlsx-sty...
这个封装下的xlsx-style没有提到行高,因为目前业务也没涉及,就没有按照网上的教程去修改xlsx-style源码。 同时基于这次的学习,还完成了一些el-table生成excel并附带一些注释和简单样式的临时方法,原理也是操作wb对象或者操作table node。
继续访问
xlsx-style的用法
如何通过xlsx-style 修改导出excel的样式 实现导出的excel是带有边框的,满足打印的时候可以尽可能的铺满A纸 安装 xlsx-style npm install xlsx-style --save 修改xlsx-style 源码 解决报错 在\node_modules\xlsx-style\dist\cpexcel.js var cpt = require('./cpt' + 'able')改为 var cpt = cptable修改vue中的代码 import X
继续访问
java之poi
POI操作Excel文件 1. POI结构与常用类 3 (1) POI介绍 3 (2) POI结构说明 3 (3) POI常用类说明 3 2. Excel的基本操作 3 (1) 创建Workbook和Sheet 3 (2) 创建单元格 3 (3) 创建文档摘要信息 4 (4) 创建批注 4 (5) 创建页眉和页脚 4 3. Excel的单元格操作 5 (1) 设置格式 5
继续访问
xlsx 导出导入excel,xlsx-style 修改excel样式_xlsx-style导入_唐十八...
引入xlsx-style会产生报错,需要在vue.config.js配置下 vue.config.js module.exports={chainWebpack(config){config.externals({'./cptable':'var cptable'})}} excel.js /* 在这里统一进行处理, 页面上把数据传过来就行了 */...
继续访问
js-xlsx-style
公司网络不能下,在这里中转,大家去官网下载,js-xlsx 社区版不支持样式保存,这个高手在他基础上,扩展了下,当然没跟上社区的最新版
最新发布 前端使用xlsx-js-style导出Excel文件并修饰单元格样式
前端使用xlsx-js-style导出Excel文件并修饰单元格样式
继续访问
js-xlsx/xlsx-style 纯前端数据导出Excel且支持自定义样式
前端开发过程中经常遇到导出excel的需求。这种情况大多数都是服务端处理数据(QAQ至少我遇到的大多数都是这样),然后返回一个链接,前端不需要管服务端怎么操作直接打开这个链接(window.location.href = url)就能下载excel了。 但是事情往往没有那么简单,当表格数据不多,且没有分页的时候,服务端往往会把导出excel的操作扔给前端。。。。前端导出excel的情况也不少,经常做了就过了,现在整理出来分享下 效果图如下: 一开始我用的是**js-xlsx插件做的,这个导出基本的表格
继续访问
js实现excel导出并附带样式demo保姆级
js实现excel导出并附带样式demo保姆级 js xlsx [xlsx-js-style] 附带样式导出excel 目录:一、导出样式二、实现代码三、使用细节说明 不存在xlsx-style依赖库问题
继续访问
热门推荐 使用js-xlsx纯前端导出excel
使用js-xlsx导出excel
继续访问
jquery.table2excel.js 导出可居中
bootstraptable 可以直接导出的插件,导出内容自动居中处理 https://blog.csdn.net/qq_39087348/article/details/112970600
sheetjs如何设置导出的单元格格式为文本
sheetjs如何设置导出的单元格格式为文本
继续访问
超详细纯前端导出excel并完成各种样式的修改(xlsx-style)
最近做的项目涉及到了excel的导出,起初需求是不需要样式层面的修改的,所以选择了XLSX.JS,没有过多的去考虑样式的修改。
继续访问
用xlsx-style设置表格的高度,宽度,颜色,字体等
参考资料,讲的不错,他用的是node-xlsx 我只用了xlsx,xlsx-style所以修改这个方法就行了 // xlsx-style版本0.8.13 // xlsx版本0.14.1 //这是xlsx-style文件中的xlsx.js的需要修改的代码,是从xlsx文件夹中的xlsx.js中复制出来的 // write_ws_xml_data找到找个方法名字,全部替换 // 把xlsx中能修改高...
继续访问
js超详细纯前端导出excel并完成各种样式的修改(xlsx-style)
超详细纯前端导出excel并完成各种样式的修改(xlsx-style)_蔡徐坤学前端的博客-CSDN博客
继续访问
vue使用js-xlsx、xlsx、xlsxStyle导出excel,可合并表格、修改格子样式,例如背景颜色、字体大小、列宽等
vue导出excel,可修改样式:背景颜色、字体、列宽等
继续访问
纯前端js(或者vue)导出excel实现:合并单元格、设置单元格样式、单元格内换行
纯前端实现js导出excel可以设置导出的excel的样式 合并单元格,单元格内自动换行,添加边框和设置字体的样式和颜色
继续访问
xlsx-style
sheetJs
xlsx-style