diff --git a/packages/excel/src/color.js b/packages/excel/src/color.js new file mode 100644 index 0000000..6ac0f9d --- /dev/null +++ b/packages/excel/src/color.js @@ -0,0 +1,24 @@ +function HexToRgb (str) { + str = str.replace("#", ""); + var hxs = str.match(/../g); + for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16); + return hxs; +} + +function RgbToHex (a, b, c) { + var hexs = [a.toString(16), b.toString(16), c.toString(16)]; + for (var i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]; + return "#" + hexs.join(""); +} + + +export function getDarkColor(color, level) { + var rgbc = HexToRgb(color); + for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level)); + return RgbToHex(rgbc[0], rgbc[1], rgbc[2]); +} +export function getLightColor(color, level) { + var rgbc = HexToRgb(color); + for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]); + return RgbToHex(rgbc[0], rgbc[1], rgbc[2]); +} \ No newline at end of file diff --git a/packages/excel/src/excel.js b/packages/excel/src/excel.js index 7c3ce2e..2ab46ec 100644 --- a/packages/excel/src/excel.js +++ b/packages/excel/src/excel.js @@ -1,7 +1,21 @@ import * as Excel from 'exceljs/dist/exceljs' import {getUrl} from "../../../utils/url"; import tinycolor from "tinycolor2"; -import _ from "lodash"; +import _, {cloneDeep} from "lodash"; +import {getDarkColor, getLightColor} from "./color"; + +const themeColor = [ + '#FFFFFF', + '#000000', + '#BFBFBF', + '#323232', + '#4472C4', + '#ED7D31', + '#A5A5A5', + '#FFC000', + '#5B9BD5', + '#71AD47' +] export function getData(src, options={}) { return fetchExcel(getUrl(src), options) @@ -60,7 +74,6 @@ function getCellText(cell){ } function transferArgbColor(originColor){ if(typeof originColor === 'object'){ - debugger return '#000000'; } originColor = originColor.trim().toLowerCase(); //去掉前后空格 @@ -73,15 +86,31 @@ function transferArgbColor(originColor){ color.a = parseInt(argb[1], 16) / 255; return tinycolor(`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`).toHexString() } catch (e) { - debugger + console.warn(e) + } +} +function transferThemeColor(themeIndex, tint){ + + if(themeIndex > 9){ + return '#C7C9CC' + } + if(typeof tint === 'undefined'){ + return themeColor[themeIndex] + }else if(tint > 0){ + return getLightColor(themeColor[themeIndex], tint) + }else{ + return getDarkColor(themeColor[themeIndex],Math.abs(tint)) } } function getStyle(cell){ + cell.style = cloneDeep(cell.style) let backGroundColor = null if(cell.style.fill && cell.style.fill.fgColor) { // 8位字符颜色先转rgb再转16进制颜色 if(cell.style.fill.fgColor.argb){ backGroundColor = transferArgbColor(cell.style.fill.fgColor.argb) + }else if(cell.style.fill.fgColor.hasOwnProperty('theme')){ + backGroundColor = transferThemeColor(cell.style.fill.fgColor.theme, cell.style.fill.fgColor.tint) }else{ backGroundColor = '#C7C9CC' } @@ -99,6 +128,8 @@ function getStyle(cell){ if(cell.style.font && cell.style.font.color ) { if(cell.style.font.color.argb){ fontColor = transferArgbColor(cell.style.font.color.argb) + }else if(cell.style.font.color.hasOwnProperty('theme')){ + fontColor = transferThemeColor(cell.style.font.color.theme, cell.style.font.color.tint) }else{ fontColor = '#000000' } @@ -122,10 +153,24 @@ function getStyle(cell){ } if(cell.style.border){ + let styleBorder = {} Object.keys(cell.style.border).forEach(position =>{ let originBorder = cell.style.border[position] - cell.style.border[position] = [originBorder.style || 'thick', originBorder.color && originBorder.color.argb && transferArgbColor(originBorder.color.argb) || '#000000'] + let bordColor = '#000000' + + if(typeof originBorder.color === 'string'){ + bordColor = originBorder.color + }else if(originBorder.color){ + if(originBorder.color.argb){ + bordColor = transferArgbColor(originBorder.color.argb) + }else if(originBorder.color.hasOwnProperty('theme')){ + bordColor = transferThemeColor(originBorder.color.theme, originBorder.color.tint) + } + } + styleBorder[position] = [originBorder.style || 'thin', bordColor] }) + cell.style.border2 = {...cell.style.border} + cell.style.border = styleBorder } return cell.style @@ -133,10 +178,11 @@ function getStyle(cell){ export function transferExcelToSpreadSheet(workbook, options){ let workbookData = [] + //console.log(workbook, 'workbook') workbook.eachSheet((sheet) => { - // console.log(sheet,'sheet') + //console.log(sheet,'sheet') // 构造x-data-spreadsheet 的 sheet 数据源结构 - let sheetData = { name: sheet.name,styles : [], rows: {},cols:{}, merges:[] } + let sheetData = { name: sheet.name,styles : [], rows: {},cols:{}, merges:[],media:[] } // 收集合并单元格信息 let mergeAddressData = [] for(let mergeRange in sheet._merges) { @@ -177,8 +223,14 @@ export function transferExcelToSpreadSheet(workbook, options){ sheetData.rows[spreadSheetRowIndex].cells[spreadSheetColIndex].style = sheetData.styles.length - 1 }) }) + if(sheetData._media){ + sheetData.media = sheetData._media + } workbookData.push(sheetData) }) - // console.log(workbookData, 'workbookData') - return workbookData + //console.log(workbookData, 'workbookData') + return { + workbookData, + medias: workbook.media || [] + } } \ No newline at end of file diff --git a/packages/excel/src/main.vue b/packages/excel/src/main.vue index e7f056b..9a8eeda 100644 --- a/packages/excel/src/main.vue +++ b/packages/excel/src/main.vue @@ -25,7 +25,8 @@ export default defineComponent({ let xs = null function renderExcel(buffer){ readExcelData(buffer).then(workbook =>{ - xs.loadData(transferExcelToSpreadSheet(workbook, props.options)); + const {workbookData, medias} = transferExcelToSpreadSheet(workbook, props.options) + xs.loadData(workbookData); emit('rendered') }).catch(e=>{ console.warn(e)