exportExcl.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. // import { createCellPos } from './translateNumToLetter'
  2. const Excel = require('exceljs');
  3. import FileSaver from 'file-saver';
  4. export function getExcelBolob(luckysheet) {
  5. // 参数为luckysheet.getluckysheetfile()获取的对象
  6. // 1.创建工作簿,可以为工作簿添加属性
  7. const workbook = new Excel.Workbook();
  8. // 2.创建表格,第二个参数可以配置创建什么样的工作表
  9. if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
  10. luckysheet = [luckysheet];
  11. }
  12. luckysheet.forEach(function (table) {
  13. if (table.data.length === 0) return true;
  14. // ws.getCell('B2').fill = fills.
  15. const worksheet = workbook.addWorksheet(table.name);
  16. const merge = (table.config && table.config.merge) || {};
  17. const borderInfo = (table.config && table.config.borderInfo) || {};
  18. const columnlen = (table.config && table.config.columnlen) || {};
  19. // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
  20. setStyleAndValue(table.data, worksheet);
  21. setColumnlen(columnlen, worksheet);
  22. setMerge(merge, worksheet);
  23. setBorder(borderInfo, worksheet);
  24. return true;
  25. });
  26. const buffer = workbook.xlsx.writeBuffer().then((data) => {
  27. // console.log('data', data)
  28. const blob = new Blob([data], {
  29. type: 'application/vnd.ms-excel;charset=utf-8',
  30. });
  31. return blob;
  32. });
  33. return buffer;
  34. }
  35. export function exportExcel(luckysheet, value) {
  36. // 4.写入 buffer
  37. getExcelBolob(luckysheet).then((blob) => {
  38. console.log('导出成功!');
  39. FileSaver.saveAs(blob, `${value}.xlsx`);
  40. });
  41. }
  42. var setMerge = function (luckyMerge = {}, worksheet) {
  43. const mergearr = Object.values(luckyMerge);
  44. mergearr.forEach(function (elem) {
  45. // elem格式:{r: 0, c: 0, rs: 1, cs: 2}
  46. // 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
  47. worksheet.mergeCells(
  48. elem.r + 1,
  49. elem.c + 1,
  50. elem.r + elem.rs,
  51. elem.c + elem.cs,
  52. );
  53. });
  54. };
  55. var setBorder = function (luckyBorderInfo, worksheet) {
  56. if (!Array.isArray(luckyBorderInfo)) return;
  57. // console.log('luckyBorderInfo', luckyBorderInfo)
  58. luckyBorderInfo.forEach(function (elem) {
  59. // 现在只兼容到borderType 为range的情况
  60. // console.log('ele', elem)
  61. if (elem.rangeType === 'range') {
  62. let border = borderConvert(elem.borderType, elem.style, elem.color);
  63. let rang = elem.range[0];
  64. // console.log('range', rang)
  65. let row = rang.row;
  66. let column = rang.column;
  67. for (let i = row[0] + 1; i < row[1] + 2; i++) {
  68. for (let y = column[0] + 1; y < column[1] + 2; y++) {
  69. worksheet.getCell(i, y).border = border;
  70. }
  71. }
  72. }
  73. if (elem.rangeType === 'cell') {
  74. // col_index: 2
  75. // row_index: 1
  76. // b: {
  77. // color: '#d0d4e3'
  78. // style: 1
  79. // }
  80. const { col_index, row_index } = elem.value;
  81. const borderData = Object.assign({}, elem.value);
  82. delete borderData.col_index;
  83. delete borderData.row_index;
  84. let border = addborderToCell(borderData, row_index, col_index);
  85. // console.log('bordre', border, borderData)
  86. if (row_index === undefined || col_index === undefined) return;
  87. worksheet.getCell(row_index + 1, col_index + 1).border = border;
  88. }
  89. // console.log(rang.column_focus + 1, rang.row_focus + 1)
  90. // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
  91. });
  92. };
  93. var setStyleAndValue = function (cellArr, worksheet) {
  94. if (!Array.isArray(cellArr)) return;
  95. cellArr.forEach(function (row, rowid) {
  96. row.every(function (cell, columnid) {
  97. if (!cell) return true;
  98. let fill = fillConvert(cell.bg);
  99. if (fill?.fgColor?.argb && fill?.fgColor?.argb.includes('rgb'))
  100. fill.fgColor.argb = rgbToHex(fill.fgColor.argb);
  101. let font = fontConvert(
  102. cell.ff,
  103. cell.fc,
  104. cell.bl,
  105. cell.it,
  106. cell.fs,
  107. cell.cl,
  108. cell.ul,
  109. );
  110. let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr);
  111. let value = '';
  112. if (cell.f) {
  113. value = { formula: cell.f, result: cell.v };
  114. } else if (!cell.v && cell.ct && cell.ct.s) {
  115. // xls转为xlsx之后,内部存在不同的格式,都会进到富文本里,即值不存在与cell.v,而是存在于cell.ct.s之后
  116. // value = cell.ct.s[0].v
  117. cell.ct.s.forEach((arr) => {
  118. value += arr.v;
  119. });
  120. } else {
  121. value = cell.v;
  122. }
  123. // style 填入到_value中可以实现填充色
  124. let letter = createCellPos(columnid);
  125. let target = worksheet.getCell(letter + (rowid + 1));
  126. // console.log('1233', letter + (rowid + 1))
  127. for (const key in fill) {
  128. target.fill = fill;
  129. break;
  130. }
  131. target.font = font;
  132. target.alignment = alignment;
  133. target.value = value;
  134. return true;
  135. });
  136. });
  137. };
  138. //设置导出的列宽
  139. var setColumnlen = function (luckyColumnlen, worksheet) {
  140. const columnlen = Object.values(luckyColumnlen);
  141. const result = columnlen.map(function (elem, idx) {
  142. return {
  143. // header: idx,
  144. key: idx,
  145. width: elem / 10,
  146. };
  147. });
  148. worksheet.columns = result;
  149. };
  150. var fillConvert = function (bg) {
  151. //bg == '#fff'导出excel后会变成 #000FFF(蓝色)
  152. if (!bg || bg == '#fff') {
  153. return {};
  154. }
  155. // const bgc = bg.replace('#', '')
  156. let fill = {
  157. type: 'pattern',
  158. pattern: 'solid',
  159. fgColor: { argb: bg.replace('#', '') },
  160. };
  161. return fill;
  162. };
  163. var fontConvert = function (
  164. ff = 0,
  165. fc = '#000000',
  166. bl = 0,
  167. it = 0,
  168. fs = 10,
  169. cl = 0,
  170. ul = 0,
  171. ) {
  172. // luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
  173. const luckyToExcel = {
  174. 0: '微软雅黑',
  175. 1: '宋体(Song)',
  176. 2: '黑体(ST Heiti)',
  177. 3: '楷体(ST Kaiti)',
  178. 4: '仿宋(ST FangSong)',
  179. 5: '新宋体(ST Song)',
  180. 6: '华文新魏',
  181. 7: '华文行楷',
  182. 8: '华文隶书',
  183. 9: 'Arial',
  184. 10: 'Times New Roman ',
  185. 11: 'Tahoma ',
  186. 12: 'Verdana',
  187. num2bl: function (num) {
  188. return num === 0 ? false : true;
  189. },
  190. };
  191. // 出现Bug,导入的时候ff为luckyToExcel的val
  192. let font = {
  193. name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
  194. family: 1,
  195. size: fs,
  196. color: { argb: fc.replace('#', '') },
  197. bold: luckyToExcel.num2bl(bl),
  198. italic: luckyToExcel.num2bl(it),
  199. underline: luckyToExcel.num2bl(ul),
  200. strike: luckyToExcel.num2bl(cl),
  201. };
  202. return font;
  203. };
  204. var alignmentConvert = function (
  205. vt = 'default',
  206. ht = 'default',
  207. tb = 'default',
  208. tr = 'default',
  209. ) {
  210. // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
  211. const luckyToExcel = {
  212. vertical: {
  213. 0: 'middle',
  214. 1: 'top',
  215. 2: 'bottom',
  216. default: 'top',
  217. },
  218. horizontal: {
  219. 0: 'center',
  220. 1: 'left',
  221. 2: 'right',
  222. default: 'left',
  223. },
  224. wrapText: {
  225. 0: false,
  226. 1: false,
  227. 2: true,
  228. default: false,
  229. },
  230. textRotation: {
  231. 0: 0,
  232. 1: 45,
  233. 2: -45,
  234. 3: 'vertical',
  235. 4: 90,
  236. 5: -90,
  237. default: 0,
  238. },
  239. };
  240. let alignment = {
  241. vertical: luckyToExcel.vertical[vt],
  242. horizontal: luckyToExcel.horizontal[ht],
  243. wrapText: luckyToExcel.wrapText[tb],
  244. textRotation: luckyToExcel.textRotation[tr],
  245. };
  246. return alignment;
  247. };
  248. var borderConvert = function (borderType, style = 1, color = '#000') {
  249. // 对应luckysheet的config中borderinfo的的参数
  250. if (!borderType) {
  251. return {};
  252. }
  253. const luckyToExcel = {
  254. type: {
  255. 'border-all': 'all',
  256. 'border-top': 'top',
  257. 'border-right': 'right',
  258. 'border-bottom': 'bottom',
  259. 'border-left': 'left',
  260. },
  261. style: {
  262. 0: 'none',
  263. 1: 'thin',
  264. 2: 'hair',
  265. 3: 'dotted',
  266. 4: 'dashDot', // 'Dashed',
  267. 5: 'dashDot',
  268. 6: 'dashDotDot',
  269. 7: 'double',
  270. 8: 'medium',
  271. 9: 'mediumDashed',
  272. 10: 'mediumDashDot',
  273. 11: 'mediumDashDotDot',
  274. 12: 'slantDashDot',
  275. 13: 'thick',
  276. },
  277. };
  278. let template = {
  279. style: luckyToExcel.style[style],
  280. color: { argb: color.replace('#', '') },
  281. };
  282. let border = {};
  283. if (luckyToExcel.type[borderType] === 'all') {
  284. border['top'] = template;
  285. border['right'] = template;
  286. border['bottom'] = template;
  287. border['left'] = template;
  288. } else {
  289. border[luckyToExcel.type[borderType]] = template;
  290. }
  291. // console.log('border', border)
  292. return border;
  293. };
  294. function addborderToCell(borders, row_index, col_index) {
  295. let border = {};
  296. const luckyExcel = {
  297. type: {
  298. l: 'left',
  299. r: 'right',
  300. b: 'bottom',
  301. t: 'top',
  302. },
  303. style: {
  304. 0: 'none',
  305. 1: 'thin',
  306. 2: 'hair',
  307. 3: 'dotted',
  308. 4: 'dashDot', // 'Dashed',
  309. 5: 'dashDot',
  310. 6: 'dashDotDot',
  311. 7: 'double',
  312. 8: 'medium',
  313. 9: 'mediumDashed',
  314. 10: 'mediumDashDot',
  315. 11: 'mediumDashDotDot',
  316. 12: 'slantDashDot',
  317. 13: 'thick',
  318. },
  319. };
  320. // console.log('borders', borders)
  321. for (const bor in borders) {
  322. if (borders[bor].color?.indexOf('rgb') === -1) {
  323. border[luckyExcel.type[bor]] = {
  324. style: luckyExcel.style[borders[bor].style],
  325. color: { argb: borders[bor].color.replace('#', '') },
  326. };
  327. } else {
  328. border[luckyExcel.type[bor]] = {
  329. style: luckyExcel.style[borders[bor].style],
  330. color: { argb: borders[bor].color },
  331. };
  332. }
  333. }
  334. return border;
  335. }
  336. function createCellPos(n) {
  337. let ordA = 'A'.charCodeAt(0);
  338. let ordZ = 'Z'.charCodeAt(0);
  339. let len = ordZ - ordA + 1;
  340. let s = '';
  341. while (n >= 0) {
  342. s = String.fromCharCode((n % len) + ordA) + s;
  343. n = Math.floor(n / len) - 1;
  344. }
  345. return s;
  346. }
  347. function isEmpty(item) {
  348. return (item?.v?.v ?? '') === '' && !item?.v?.ct?.s;
  349. }
  350. // 切换比对状态
  351. export const toggleCompare = (currentData, compareData, callback) => {
  352. const DIFF_COLOR = '#ff0000';
  353. const ADD_COLOR = '#00ff00';
  354. let diff = [];
  355. let add = [];
  356. currentData?.forEach((sheet, index) => {
  357. let celldata1 = sheet.celldata;
  358. let celldata2 = compareData[index]?.celldata || [];
  359. celldata1.forEach((item) => {
  360. // 不判断空字符串
  361. if (isEmpty(item) || item.hide) return;
  362. var d2Item = celldata2.find((item2) => item2.v.cid == item.v.cid);
  363. if (d2Item && !isEmpty(d2Item)) {
  364. // v.ct.s相同,不做处理
  365. if (
  366. item.v.ct?.s &&
  367. JSON.stringify(item.v.ct?.s) == JSON.stringify(d2Item.v.ct?.s)
  368. )
  369. return;
  370. // v.v相同,不做处理
  371. if (d2Item.v.v == item.v.v) return;
  372. // 内容不同,标记diff颜色
  373. diff.push({
  374. ...item,
  375. sheetOrder: index,
  376. });
  377. item.v.bg = DIFF_COLOR;
  378. // luckysheet.setCellFormat(item.r, item.c, 'bg', DIFF_COLOR);
  379. } else {
  380. // 找不到同cid的单元格,标记add颜色
  381. add.push({
  382. ...item,
  383. sheetOrder: index,
  384. });
  385. item.v.bg = ADD_COLOR;
  386. // luckysheet.setCellFormat(item.r, item.c, 'bg', ADD_COLOR);
  387. }
  388. });
  389. });
  390. console.log(diff, add);
  391. callback &&
  392. callback({
  393. diff: diff.length,
  394. add: add.length,
  395. });
  396. return currentData;
  397. };
  398. export function getUUID(len = 8, radix = 16) {
  399. var chars =
  400. '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  401. var uuid = [],
  402. i;
  403. radix = radix || chars.length;
  404. if (len) {
  405. // Compact form
  406. for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  407. } else {
  408. // rfc4122, version 4 form
  409. var r;
  410. // rfc4122 requires these characters
  411. uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
  412. uuid[14] = '4';
  413. // Fill in random data. At i==19 set the high bits of clock sequence as
  414. // per rfc4122, sec. 4.1.5
  415. for (i = 0; i < 36; i++) {
  416. if (!uuid[i]) {
  417. r = 0 | (Math.random() * 16);
  418. uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
  419. }
  420. }
  421. }
  422. return uuid.join('');
  423. }
  424. function rgbToHex(rgbString) {
  425. // var rgbString = "rgb(255, 255, 255)";
  426. var hexColor = 'FFFFFF';
  427. // 使用正则表达式匹配出数字部分
  428. var match = rgbString?.match(/\d+/g);
  429. if (match) {
  430. var r = parseInt(match[0]); // 第一个匹配项是红色分量
  431. var g = parseInt(match[1]); // 第二个匹配项是绿色分量
  432. var b = parseInt(match[2]); // 第三个匹配项是蓝色分量
  433. console.log('Red:', r);
  434. console.log('Green:', g);
  435. console.log('Blue:', b);
  436. // 将每个RGB分量转换为十六进制,并确保至少两位
  437. var redHex = r.toString(16).padStart(2, '0');
  438. var greenHex = g.toString(16).padStart(2, '0');
  439. var blueHex = b.toString(16).padStart(2, '0');
  440. // 将三个分量的十六进制值连接起来
  441. hexColor = redHex + greenHex + blueHex;
  442. // 转换为大写字母形式
  443. hexColor = hexColor.toUpperCase();
  444. }
  445. return hexColor;
  446. }