feat: add page number format option

src/editor/core/draw/Draw.ts

@@ -331,6 +331,10 @@ export class Draw {
     return this.pageList
   }
 
+  public getPageCount(): number {
+    return this.pageList.length
+  }
+
   public getTableRowList(sourceElementList: IElement[]): IRow[] {
     const positionContext = this.position.getPositionContext()
     const { index, trIndex, tdIndex } = positionContext

src/editor/core/draw/frame/PageNumber.ts

@@ -1,7 +1,10 @@
+import { FORMAT_PLACEHOLDER } from '../../../dataset/constant/PageNumber'
+import { NumberType } from '../../../dataset/enum/Common'
 import { PageMode } from '../../../dataset/enum/Editor'
 import { RowFlex } from '../../../dataset/enum/Row'
 import { DeepRequired } from '../../../interface/Common'
 import { IEditorOption } from '../../../interface/Editor'
+import { convertNumberToChinese } from '../../../utils'
 import { Draw } from '../Draw'
 
 export class PageNumber {
@@ -15,8 +18,21 @@ export class PageNumber {
   }
 
   public render(ctx: CanvasRenderingContext2D, pageNo: number) {
-    const { pageNumber: { size, font, color, rowFlex }, scale, pageMode } = this.options
+    const { pageNumber: { size, font, color, rowFlex, numberType, format }, scale, pageMode } = this.options
-    const text = `${pageNo + 1}`
+    // 处理页码格式
+    let text = format
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO)
+    if (pageNoReg.test(text)) {
+      const realPageNo = pageNo + 1
+      const pageNoText = numberType === NumberType.CHINESE ? convertNumberToChinese(realPageNo) : `${realPageNo}`
+      text = text.replace(pageNoReg, pageNoText)
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT)
+    if (pageCountReg.test(text)) {
+      const pageCount = this.draw.getPageCount()
+      const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}`
+      text = text.replace(pageCountReg, pageCountText)
+    }
     const width = this.draw.getWidth()
     // 计算y位置
     const height = pageMode === PageMode.CONTINUITY

src/editor/dataset/constant/PageNumber.ts

@@ -1,10 +1,18 @@
 import { IPageNumber } from '../../interface/PageNumber'
+import { NumberType } from '../enum/Common'
 import { RowFlex } from '../enum/Row'
 
+export const FORMAT_PLACEHOLDER = {
+  PAGE_NO: '{pageNo}',
+  PAGE_COUNT: '{pageCount}'
+}
+
 export const defaultPageNumberOption: Readonly<Required<IPageNumber>> = {
   bottom: 60,
   size: 12,
   font: 'Yahei',
   color: '#000000',
-  rowFlex: RowFlex.CENTER
+  rowFlex: RowFlex.CENTER,
+  format: FORMAT_PLACEHOLDER.PAGE_NO,
+  numberType: NumberType.ARABIC
 }

src/editor/dataset/enum/Common.ts

@@ -2,4 +2,9 @@ export enum MaxHeightRatio {
   HALF = 'half',
   ONE_THIRD = 'one-third',
   QUARTER = 'quarter'
+}
+
+export enum NumberType {
+  ARABIC = 'arabic',
+  CHINESE = 'chinese'
 }

src/editor/index.ts

@@ -37,7 +37,7 @@ import { VerticalAlign } from './dataset/enum/VerticalAlign'
 import { TableBorder } from './dataset/enum/table/Table'
 import { IFooter } from './interface/Footer'
 import { defaultFooterOption } from './dataset/constant/Footer'
-import { MaxHeightRatio } from './dataset/enum/Common'
+import { MaxHeightRatio, NumberType } from './dataset/enum/Common'
 
 export default class Editor {
 
@@ -189,7 +189,8 @@ export {
   BlockType,
   PaperDirection,
   TableBorder,
-  MaxHeightRatio
+  MaxHeightRatio,
+  NumberType
 }
 
 // 对外类型

src/editor/interface/PageNumber.ts

@@ -1,3 +1,4 @@
+import { NumberType } from '../dataset/enum/Common'
 import { RowFlex } from '../dataset/enum/Row'
 
 export interface IPageNumber {
@@ -6,4 +7,6 @@ export interface IPageNumber {
   font?: string;
   color?: string;
   rowFlex?: RowFlex;
+  format?: string;
+  numberType?: NumberType;
 }

src/editor/utils/index.ts

@@ -117,4 +117,24 @@ export function nextTick(fn: Function) {
   setTimeout(() => {
     fn()
   }, 0)
+}
+
+export function convertNumberToChinese(num: number) {
+  const chineseNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+  const chineseUnit = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']
+  if (!num || isNaN(num)) return '零'
+  const numStr = num.toString().split('')
+  let result = ''
+  for (let i = 0; i < numStr.length; i++) {
+    const desIndex = numStr.length - 1 - i
+    result = `${chineseUnit[i]}${result}`
+    result = `${chineseNum[Number(numStr[desIndex])]}${result}`
+  }
+  result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
+  result = result.replace(/零+/g, '零')
+  result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
+  result = result.replace(/亿万/g, '亿')
+  result = result.replace(/零+$/, '')
+  result = result.replace(/^一十/g, '十')
+  return result
 }

src/mock.ts

@@ -295,5 +295,8 @@ export const options: IEditorOption = {
   watermark: {
     data: 'CANVAS-EDITOR',
     size: 120
+  },
+  pageNumber: {
+    format: '第{pageNo}页/共{pageCount}页'
   }
 }