vue项目使用xlsx-style导出自定义格式excel

一.遇到问题

1.给自定义格式的excel中的合并单元格加边框的时候,出现边框不完整的情况.

解决:将该合并单元格拆分成最小单位的单元格,设置其边框属性. 直接赋值的话不可行,因为子单元格并没有边框属性,只有合并单元格才有, 这里使用的方法是:记录合并单元格的属性信息, 然后循环对子单元格赋值.
代码:

function addRangeBorder(range,ws){let 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=>{let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);const test = ws[arr[startRowNumber] + (startColNumber + 1)];for(let col = startColNumber ; col <= endColNumber ; col++){for(let row = startRowNumber; row <= endRowNumber ; row++){//const test = ws[arr[j] + i];//console.log(arr[row] + (col + 1));ws[arr[row] + (col + 1)] = test;//{s:{border:{top:{style:'thin'}, left:{style:'thin'},bottom:{style:'thin'},right:{style:'thin'}}}};}}})return ws;
}

二.DEMO

一个完整的例子:

import FileSaver from 'file-saver'
import XLSX from 'xlsx-style'// 设置表格中cell默认的字体，居中，颜色等var defaultCellStyle = {font: {name: "宋体", sz: 11, color: { auto: 1 } ,},border: {color: { auto: 1 },top: { style: 'thin' },bottom: { style: 'thin'},left: { style: 'thin' },right: { style: 'thin' }},alignment: {/// 自动换行wrapText: 1,// 居中horizontal: "center",vertical: "center",indent: 0}};
// 从json转化为sheet，xslx中没有aoaToSheet的方法，该方法摘自官方test
function sheet_from_array_of_arrays(data) {const ws = {};const range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};for(let R = 0; R !== data.length; ++R) {for(let C = 0; C !== data[R].length; ++C) {if(range.s.r > R) range.s.r = R;if(range.s.c > C) range.s.c = C;if(range.e.r < R) range.e.r = R;if(range.e.c < C) range.e.c = C;/// 这里生成cell的时候，使用上面定义的默认样式const cell = {v: data[R][C], s: defaultCellStyle};if(cell.v == null) continue;const cell_ref = XLSX.utils.encode_cell({c:C,r:R});/* TEST: proper cell types and value handling */if(typeof cell.v === 'number') cell.t = 'n';else if(typeof cell.v === 'boolean') cell.t = 'b';else if(cell.v instanceof Date) {cell.t = 'n'; cell.z = XLSX.SSF._table[14];cell.v = this.dateNum(cell.v);}else cell.t = 's';ws[cell_ref] = cell;}}/* TEST: proper range */if(range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;
}// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {sheetName = sheetName || 'sheet1';const workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheetwindow.console.log(workbook)// 生成excel的配置项const wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary'};const wbout = XLSX.write(workbook, wopts, { defaultCellStyle: defaultCellStyle });const blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});// 字符串转ArrayBufferfunction s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i=0; i!==s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}return blob;
}function addRangeBorder(range,ws){let 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=>{let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);const test = ws[arr[startRowNumber] + (startColNumber + 1)];for(let col = startColNumber ; col <= endColNumber ; col++){for(let row = startRowNumber; row <= endRowNumber ; row++){//const test = ws[arr[j] + i];//console.log(arr[row] + (col + 1));ws[arr[row] + (col + 1)] = test;//{s:{border:{top:{style:'thin'}, left:{style:'thin'},bottom:{style:'thin'},right:{style:'thin'}}}};}}})return ws;
}function funtransformF() {// 表头信息 要合并的字段用null代替let aoa = [['江苏省多式联运示范工程项目2019年第二季度动态监测信息表'],['序号', '市别', '示范工程项目名称', '示范工程项目运行情况'],[null, null, null, '联运组织',null, null, null, null, null, null, '企业总货物运输量（万吨/万标箱）', null, '枢纽场站建设投资额（万元）', '装备配备建设投资额（万元）', '信息化建设投资额（万元）', '其他'],[null, null, null, '联运线路（条）','联运线路运营情况', null, null, null, null, null],[null, null, null, null, '线路', '联运路线', '联运模式', '联运量', null, '联运周转量（万吨公里）', null, null, null, null, null, null],[null, null, null, null, null, null, null, '万吨', '万标箱', null, '万吨', '万标箱', null, null, null]]// json => sheetconst sheet = sheet_from_array_of_arrays(aoa);// 表头合并： r: row 行；c:column 列const mergeTitle = [// 江苏省多式联运示范工程项目2019年第二季度动态监测信息表{s: {r: 0, c: 0},e: {r: 0, c: 15}},// 序号{s: {r: 1, c: 0},e: {r: 5, c: 0}},// 市别{s: {r: 1, c: 1},e: {r: 5, c: 1}},// 示范工程名称{s: {r: 1, c: 2},e: {r: 5, c: 2}},// 示范工程项目运行情况{s: {r: 1, c: 3},e: {r: 1, c: 15}},// 联运组织{s: {r: 2, c: 3},e: {r: 2, c: 9}},// 联运线路(条){s: {r: 3, c: 3},e: {r: 5, c: 3}},// 联运线路运营情况{s: {r: 3, c: 4},e: {r: 3, c: 9}},// 线路{s: {r: 4, c: 4},e: {r: 5, c: 4}},// 联运路线{s: {r: 4, c: 5},e: {r: 5, c: 5}},// 联运模式{s: {r: 4, c: 6},e: {r: 5, c: 6}},// 联运量{s: {r: 4, c: 7},e: {r: 4, c: 8}},// 联运周转量(万吨公里){s: {r: 4, c: 9},e: {r: 5, c: 9}},// 企业总货物运输量（万吨/万标箱）{s: {r: 2, c: 10},e: {r: 4, c: 11}},// 枢纽场站建设投资额（万元）{s: {r: 2, c: 12},e: {r: 5, c: 12}},//装备配备建设投资额（万元）{s: {r: 2, c: 13},e: {r: 5, c: 13}},// 信息化建设投资额（万元）{s: {r: 2, c: 14},e: {r: 5, c: 14}},// 其他{s: {r: 2, c: 15},e: {r: 5, c: 15}},]//sheet['!merges'] = mergeTitle.concat(mergeContent);sheet['!merges'] = mergeTitle;// 冻结前6行和第一列，右下可以滑动sheet["!freeze"] = {xSplit: "1",ySplit: "6",topLeftCell: "B7",activePane: "bottomRight",state: "frozen",}sheet["!margins"] = { left: 1.0, right: 1.0, top: 1.0, bottom: 1.0, header: 0.5, footer: 0.5 }// 列宽 使用的不是像素值const sheetCols = [{ wch: 8} , // 序号{ wch: 10 }, // 市别{ wch: 20 }, // 示范工程项目名称{ wch: 9 }, // 联运线路(条){ wch: 8 }, // 线路{ wch: 18 }, // 联运路线{ wch: 15 }, // 联运模式{ wch: 9 }, // 联运量-万吨{ wch: 9 }, // 联运量-万标箱{ wch: 12 }, // 联运周转量{ wch: 9 }, // 企业万吨{ wch: 9 }, // 企业 万标箱{ wch: 10 }, // 枢纽站{ wch: 10 }, // 装备{ wch: 10 }, // 信息化{ wch: 27 }, // 备注];sheet['!cols'] = sheetCols;addRangeBorder(mergeTitle, sheet);const wbBlob = sheet2blob(sheet, '1')// 保存下载FileSaver.saveAs(wbBlob, 'd.xlsx')}export {funtransformF}

效果图:

vue项目使用xlsx-style导出自定义格式excel相关推荐

vue项目中实现下载后端返回的excel数据表格
查看更多资源 1. 案例简介: vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返 ...
vb.net 导出固定格式EXCEL
客户要求,导出固定格式EXCEL,牵涉到office.excel类的相关操作,记录下: 1)引用Microsoft.Office.Interop.Excel和Microsoft.Office.Inte ...
php导出csv_原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
本文实例讲述了原生PHP实现导出csv格式Excel文件的方法.分享给大家供大家参考,具体如下: 效果图源码分析 index.php require_once "./Export.php& ...
vue项目使用encode_Vue项目中使用xlsx-style导出有格式的表格
SheetJS是前端导出Excel文件的利器,通过很简单的方法就可以实现导出xls.xlsx.odd等格式的文件. 但是SheetJS免费版本支持的格式太少,包括居中.自动换行.冻结等都不行.gith ...
Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作
前端项目开发时,常常需要很多小技巧,比如使用Cookie巧妙实现某个效果.此次就以Vue项目记录一下如何使用Cookie. cookie.js /*** 写入cookie* @param {*} na ...
springboot+poi导出指定格式Excel模板详解+Demo
项目用的是springboot框架,非常的简单,只需导入项目即可运行,先看看效果: 资源下载地址: http://download.csdn.net/download/tjcyjd/9998721 具 ...
xlsx插件导出数据到Excel里百分比变成数字的问题。
需求是将页面数据导入到Excel表格中,数据中的百分比数据在Excel表格里展示的确实小数. 方法如下: exportExcel() { //以下是设置导出的Excel的名称,这是表名+当前日期. c ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
vue项目 - 实现页面打印成PDF格式
现在要实现功能为:将写好的页面.打印成PDF格式代码实现 1.首先安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片 ...

vue项目使用xlsx-style导出自定义格式excel

一.遇到问题

二.DEMO

vue项目使用xlsx-style导出自定义格式excel相关推荐

最新文章

热门文章