穹拓网站建设,制作微信网站模板,城市建设规划网站,电脑做网站服务器教程说明
因为最近需要实现前端导出 excel 文件#xff0c;并且对导出文件的样式进行一些修改#xff0c;比如颜色、字体、合并单元格等#xff0c;所以我找到了xlsx-style这个项目#xff0c;它可以对导出的 excel 文件进行一些样式上的修改#xff0c;这个项目是SheetJs的一…说明
因为最近需要实现前端导出 excel 文件并且对导出文件的样式进行一些修改比如颜色、字体、合并单元格等所以我找到了xlsx-style这个项目它可以对导出的 excel 文件进行一些样式上的修改这个项目是SheetJs的一个分支。其实SheetJs也是支持修改导出文件的样式的不过是在它的专业版中 SheetJs 分为社区版和专业版社区版是开源的但是却不支持修改导出文件的样式专业版拥有更多的功能这其中就包括修改样式但是如果需要使用专业版要邮件联系SheetJS 的开发者去咨询价格购买它。 另外可以exceljs也可以实现冻结单元格功能具体可以自行查看说明文档这里主要介绍xlsx在社区版的情况下如何改造支持冻结单元格功能。 我这里是纯js改造 安装
npm install xlsx xlsx-style --save
准备工作
复制文件
在node_modules/xlsx/dist文件中复制文件xlsx-extendscript.js 我安装的xlsx的版本是0.18.5 新建纯前端js项目
新建文件夹downExcelTest将复制过来的文件放到downExcelTest文件夹中并创建index.html文件
xlsx0.18.5 安装的xlsx的版本是0.18.5index.html文件中只需要引入xlsx-extendscript.js即可 xlsx-extendscript.js找到write_ws_xml_sheetviews方法下面是改造后的
function write_ws_xml_sheetviews(ws, opts, idx, wb) {var sview ({workbookViewId:0});// $FlowIgnoreif((((wb||{}).Workbook||{}).Views||[])[0]) sview.rightToLeft wb.Workbook.Views[0].RTL ? 1 : 0;// 冻结窗口var pane null;var freeze ws[!freeze];// console.log(freeze)if (freeze ! undefined) {pane writextag(pane, null, {xSplit: freeze.xSplit, // 冻结列ySplit: freeze.ySplit, // 冻结行topLeftCell: freeze.topLeftCell, // 在未冻结区域的左上角显示的单元格默认为第一个未冻结的单元格activePane: freeze.activePane,state: freeze.state || frozen})}return writextag(sheetViews, writextag(sheetView, pane, sview), {});
}
在index.html下载方法中写入
// 冻结第一行和第一列
worksheet[!freeze] {xSplit: 1, //冻结列ySplit: 1, //冻结行// topLeftCell: B2, //在未冻结区域的左上角显示的单元格默认为第一个未冻结的单元格// activePane: bottomLeft,state: frozen
}
完整代码
下面是index.html下载excel完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydivbutton idbtn onclickdownExcel()点击下载excel/button/divscript src./xlsx.extendscript.js/scriptscriptfunction downExcel() {var data [[allsdkf, asdfsdfsdf, asdfsdfsdf, sdfsdfsdf],[lowene, asdfsdfsdf, asdfsdfsdf, sdfsdfsdf],[sfwerwer, asdfsdfsdf, asdfsdfsdf, sdfsdfsdf],[allserwersdkf, asdfsdfsdf, asdfsdfsdf, sdfsdfsdf]]exportExcel(冻结测试, data)}function exportExcel(title, data, fileNameout.xlsx) {// 样式不起作用具体可以引入xlsx-style获取pro版var style {hs: {font: {fz: 16, color: {rgb: 000000}, bold: true},alignment: {horizontal: center, vertical: center, wrapText: true}}}var workbook XLSX.utils.book_new();var worksheet XLSX.utils.aoa_to_sheet([]);// worksheet[A1] {t: s, v: title, s: style.hs}worksheet[A1] {v: 123,t: s,s: {font: {color: { rgb: FF0187FA }},}}XLSX.utils.sheet_add_aoa(worksheet, data, {origin: A2})XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)var ranges {s: {c: 0, r: 0}, e: {c: data.length - 1, r: 0}}worksheet[!merges] [ranges]// 冻结第一行和第一列worksheet[!freeze] {xSplit: 0, //冻结列ySplit: 1, //冻结行// topLeftCell: A2, //在未冻结区域的左上角显示的单元格默认为第一个未冻结的单元格state: frozen}var wbout XLSX.write(workbook, {bookType: xlsx,bookSST: false,type: binary})console.log(XLSX)var blob new Blob([s2ab(wbout)], { type: application/octet-stream });saveAs(blob, fileName);}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;}function saveAs(url, filename) {if (typeof url object url instanceof Blob) {url URL.createObjectURL(url) }var link document.createElement(a);link.download filename;link.href url;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);}link.dispatchEvent(event)}/script
/body
/html
