improve: print quality #185

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

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;}

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<string[]> {
+  public getImage(pixelRatio?: number): Promise<string[]> {
-    return this.draw.getDataURL()
+    return this.draw.getDataURL(pixelRatio)
   }
 
   public getValue(options?: IGetValueOption): IEditorResult {

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<IEditorOption>
   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<string[]> {
+  public async getDataURL(pixelRatio?: number): Promise<string[]> {
+    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) {

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,

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