add: 增加excel对日期的支持

This commit is contained in:
liyulin 2023-03-21 10:40:18 +08:00
parent 2cfbf69791
commit ba12ef4739
6 changed files with 114 additions and 97 deletions

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/> />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-996e5f27.js"></script> <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-737025cc.js"></script>
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-606d65f9.css"> <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-606d65f9.css">
</head> </head>
<body> <body>

View File

@ -4,6 +4,7 @@
"description": "通过Vue开发的办公文档预览组件支持docx、pdf、ppt、excel(已实现)的预览", "description": "通过Vue开发的办公文档预览组件支持docx、pdf、ppt、excel(已实现)的预览",
"scripts": {}, "scripts": {},
"dependencies": { "dependencies": {
"dayjs": "^1.11.7",
"docx-preview": "^0.1.14", "docx-preview": "^0.1.14",
"exceljs": "^4.3.0", "exceljs": "^4.3.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/excel", "name": "@vue-office/excel",
"version": "0.2.7", "version": "0.2.8",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

View File

@ -3,6 +3,7 @@ import {getUrl} from '../../../utils/url';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import _, {cloneDeep} from 'lodash'; import _, {cloneDeep} from 'lodash';
import {getDarkColor, getLightColor} from './color'; import {getDarkColor, getLightColor} from './color';
import dayjs from 'dayjs';
const themeColor = [ const themeColor = [
'#FFFFFF', '#FFFFFF',
@ -18,7 +19,7 @@ const themeColor = [
]; ];
let defaultColWidth = 80; let defaultColWidth = 80;
const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
export function getData(src, options={}) { export function getData(src, options={}) {
return fetchExcel(getUrl(src), options); return fetchExcel(getUrl(src), options);
} }
@ -58,24 +59,37 @@ function transferColumns(excelSheet, spreadSheet, options){
} }
function getCellText(cell){ function getCellText(cell){
if(typeof cell.value === 'number'){ //console.log(cell);
return cell.value + ''; const {numFmt, value, type} = cell;
switch (type){
case 2: //数字
return value + '';
case 3: //字符串
return value;
case 4: //日期
switch (numFmt){
case 'yyyy-mm-dd;@':
return dayjs(value).format('YYYY-MM-DD');
case 'mm-dd-yy':
return dayjs(value).format('YYYY/MM/DD');
case '[$-F800]dddd, mmmm dd, yyyy':
return dayjs(value).format('YYYY年M月D日 ddd');
case 'm"月"d"日";@':
return dayjs(value).format('M月D日');
case 'yyyy/m/d h:mm;@':
case 'm/d/yy "h":mm':
return dayjs(value).subtract(8, 'hour').format('YYYY/M/DD HH:mm');
case 'h:mm;@':
return dayjs(value).format('HH:mm');
default:
return dayjs(value).format('YYYY-MM-DD');
}
case 6: //公式
return cell.result;
default:
return value;
} }
let cellText = '';
if(cell.value && cell.value.result) {
// Excel 单元格有公式
cellText = cell.value.result;
} else if(cell.value && cell.value.richText) {
// Excel 单元格是多行文本
for(let text in cell.value.richText) {
// 多行文本做累加
cellText += cell.value.richText[text].text;
}
} else {
// Excel 单元格无公式
cellText = cell.value;
}
return cellText;
} }
function transferArgbColor(originColor){ function transferArgbColor(originColor){
if(typeof originColor === 'object'){ if(typeof originColor === 'object'){
@ -188,7 +202,7 @@ export function transferExcelToSpreadSheet(workbook, options){
let workbookData = []; let workbookData = [];
//console.log(workbook, 'workbook') //console.log(workbook, 'workbook')
workbook.eachSheet((sheet) => { workbook.eachSheet((sheet) => {
//console.log(sheet,'sheet') // console.log(sheet,'sheet');
// 构造x-data-spreadsheet 的 sheet 数据源结构 // 构造x-data-spreadsheet 的 sheet 数据源结构
let sheetData = { name: sheet.name,styles : [], rows: {},cols:{}, merges:[],media:[] }; let sheetData = { name: sheet.name,styles : [], rows: {},cols:{}, merges:[],media:[] };
// 收集合并单元格信息 // 收集合并单元格信息

2
pnpm-lock.yaml generated
View File

@ -3,6 +3,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@vitejs/plugin-vue': ^4.0.0 '@vitejs/plugin-vue': ^4.0.0
'@vue/composition-api': ^1.7.1 '@vue/composition-api': ^1.7.1
dayjs: ^1.11.7
docx-preview: ^0.1.14 docx-preview: ^0.1.14
eslint: ^8.36.0 eslint: ^8.36.0
eslint-plugin-vue: ^9.9.0 eslint-plugin-vue: ^9.9.0
@ -23,6 +24,7 @@ specifiers:
x-data-spreadsheet: ^1.1.9 x-data-spreadsheet: ^1.1.9
dependencies: dependencies:
dayjs: 1.11.7
docx-preview: 0.1.15 docx-preview: 0.1.15
exceljs: 4.3.0 exceljs: 4.3.0
lodash: 4.17.21 lodash: 4.17.21