diff --git a/docs/guide/command-get.md b/docs/guide/command-get.md index cca3cf2..6824d9f 100644 --- a/docs/guide/command-get.md +++ b/docs/guide/command-get.md @@ -29,7 +29,7 @@ const { 用法: ```javascript -const base64StringList = await instance.command.getImage() +const base64StringList = await instance.command.getImage(pixelRatio?: number) ``` ## getWordCount diff --git a/docs/guide/option.md b/docs/guide/option.md index 7a87e62..57f33a0 100644 --- a/docs/guide/option.md +++ b/docs/guide/option.md @@ -52,6 +52,7 @@ interface IEditorOption { paperDirection?: PaperDirection; // 纸张方向:纵向、横向 inactiveAlpha?: number; // 正文内容失焦时透明度。默认值:0.6 historyMaxRecordCount: number; // 历史(撤销重做)最大记录次数。默认:100次 + printPixelRatio: number; // 打印像素比率(值越大越清晰,但尺寸越大)。默认:3 wordBreak: WordBreak; // 单词与标点断行:BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认:BREAK_WORD watermark?: IWatermark; // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;} control?: IControlOption; // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;} diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 091559e..6a221a2 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1014,6 +1014,7 @@ export class CommandAdapt { let endTd = curTrList[endTrIndex!].tdList[endTdIndex!] // 交换起始位置 if (startTd.x! > endTd.x! || startTd.y! > endTd.y!) { + // prettier-ignore [startTd, endTd] = [endTd, startTd] } const startColIndex = startTd.colIndex! @@ -1628,13 +1629,13 @@ export class CommandAdapt { } public async print() { - const { scale } = this.options + const { scale, printPixelRatio } = this.options if (scale !== 1) { this.draw.setPageScale(1) } const width = this.draw.getOriginalWidth() const height = this.draw.getOriginalHeight() - const base64List = await this.draw.getDataURL() + const base64List = await this.draw.getDataURL(printPixelRatio) printImageBase64(base64List, width, height) if (scale !== 1) { this.draw.setPageScale(scale) @@ -1671,8 +1672,8 @@ export class CommandAdapt { }) } - public getImage(): Promise { - return this.draw.getDataURL() + public getImage(pixelRatio?: number): Promise { + return this.draw.getDataURL(pixelRatio) } public getValue(options?: IGetValueOption): IEditorResult { diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index bdc1557..aa47b8b 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -86,6 +86,7 @@ export class Draw { private pageList: HTMLCanvasElement[] private ctxList: CanvasRenderingContext2D[] private pageNo: number + private pagePixelRatio: number | null private mode: EditorMode private options: DeepRequired private position: Position @@ -151,6 +152,7 @@ export class Draw { this.pageList = [] this.ctxList = [] this.pageNo = 0 + this.pagePixelRatio = null this.mode = options.mode this.options = options this.headerElementList = data.header || [] @@ -627,7 +629,10 @@ export class Draw { return this.rowList.length } - public async getDataURL(): Promise { + public async getDataURL(pixelRatio?: number): Promise { + if (pixelRatio) { + this.setPagePixelRatio(pixelRatio) + } this.render({ isLazy: false, isCompute: false, @@ -635,7 +640,11 @@ export class Draw { isSubmitHistory: false }) await this.imageObserver.allSettled() - return this.pageList.map(c => c.toDataURL()) + const dataUrlList = this.pageList.map(c => c.toDataURL()) + if (pixelRatio) { + this.setPagePixelRatio(null) + } + return dataUrlList } public getPainterStyle(): IElementStyle | null { @@ -678,7 +687,7 @@ export class Draw { // 纸张大小重置 if (payload === PageMode.PAGING) { const { height } = this.options - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() const canvas = this.pageList[0] canvas.style.height = `${height}px` canvas.height = height * dpr @@ -704,7 +713,7 @@ export class Draw { } public setPageScale(payload: number) { - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() this.options.scale = payload const width = this.getWidth() const height = this.getHeight() @@ -726,8 +735,23 @@ export class Draw { } } + public getPagePixelRatio(): number { + return this.pagePixelRatio || window.devicePixelRatio + } + + public setPagePixelRatio(payload: number | null) { + if ( + (!this.pagePixelRatio && payload === window.devicePixelRatio) || + payload === this.pagePixelRatio + ) { + return + } + this.pagePixelRatio = payload + this.setPageDevicePixel() + } + public setPageDevicePixel() { - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() const width = this.getWidth() const height = this.getHeight() this.pageList.forEach((p, i) => { @@ -744,7 +768,7 @@ export class Draw { public setPaperSize(width: number, height: number) { this.options.width = width this.options.height = height - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() const realWidth = this.getWidth() const realHeight = this.getHeight() this.container.style.width = `${realWidth}px` @@ -762,7 +786,7 @@ export class Draw { } public setPaperDirection(payload: PaperDirection) { - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() this.options.paperDirection = payload const width = this.getWidth() const height = this.getHeight() @@ -878,7 +902,7 @@ export class Draw { canvas.setAttribute('data-index', String(pageNo)) this.pageContainer.append(canvas) // 调整分辨率 - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() canvas.width = width * dpr canvas.height = height * dpr canvas.style.cursor = 'text' @@ -891,7 +915,7 @@ export class Draw { } private _initPageContext(ctx: CanvasRenderingContext2D) { - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() ctx.scale(dpr, dpr) // 重置以下属性是因部分浏览器(chrome)会应用css样式 ctx.letterSpacing = '0px' @@ -1309,7 +1333,7 @@ export class Draw { pageRowList[0] = this.rowList // 重置高度 pageHeight += this.rowList.reduce((pre, cur) => pre + cur.height, 0) - const dpr = window.devicePixelRatio + const dpr = this.getPagePixelRatio() const pageDom = this.pageList[0] const pageDomHeight = Number(pageDom.style.height.replace('px', '')) if (pageHeight > pageDomHeight) { diff --git a/src/editor/index.ts b/src/editor/index.ts index 9ea847f..afc2629 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -144,6 +144,7 @@ export default class Editor { inactiveAlpha: 0.6, historyMaxRecordCount: 100, wordBreak: WordBreak.BREAK_WORD, + printPixelRatio: 3, ...options, header: headerOptions, footer: footerOptions, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 7168954..4e76ad7 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -58,6 +58,7 @@ export interface IEditorOption { paperDirection?: PaperDirection inactiveAlpha?: number historyMaxRecordCount?: number + printPixelRatio?: number wordBreak?: WordBreak header?: IHeader footer?: IFooter