fix: electron 打印 bug

gmfe · Oct 9, 2024 · 8736577 · 8736577
1 parent 5bfaee9
commit 8736577
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 29 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -76,7 +76,7 @@ declare module 'gm-x-printer' {
   function doBatchPrint(
     list: any[],
     isTest?: boolean,
-    extraConfig?: { isPreview: boolean; isTipZoom: boolean, isPrint: boolean },
+    extraConfig?: { isPreview: boolean; isTipZoom: boolean, isPrint: boolean, isElectronPrint?: boolean },
     onReady?: () => void
   ): (list: []) => Promise<any>
   export {

diff --git a/src/printer/do_print.js b/src/printer/do_print.js
@@ -9,37 +9,16 @@ import ReactDOMServer from 'react-dom/server'
 
 const printerId = '_gm-printer_' + Math.random()
 let $printer = window.document.getElementById(printerId)
+let doc
 
-function init({ isTest, isPreview, isTipZoom = true }) {
+function init({ isTest, isPreview, isElectronPrint, isTipZoom = true }) {
   isTipZoom &&
     isZoom2() &&
     window.alert(
       '检测您的浏览器使用了缩放,为了避免影响打印布局,请使用快捷键 ctrl + 0 重置缩放到100%后再进行打印'
     )
-  if (!$printer) {
-    $printer = window.document.createElement('iframe')
-    $printer.id = printerId
-    $printer.style.position = 'fixed'
-    $printer.style.top = '0'
-    $printer.frameborder = '0'
-    $printer.style.border = 'none'
-    $printer.style.width = '100%' // 使移动端可滚动
-    if (isTest) {
-      // 模板编辑[测试打印],隐藏起来
-      $printer.style.left = '-3000px'
-    } else {
-      $printer.style.left = '0px'
-      $printer.style.height = '100vh'
-    }
-    window.document.body.appendChild($printer)
-
-    const idocument = $printer.contentDocument
-    idocument.open()
-    idocument.write('<!DOCTYPE html><html><head></head><body></body></html>')
-    idocument.close()
-
-    const doc = $printer.contentWindow.document
 
+  const createElement = () => {
     const style = doc.createElement('style')
     style.type = 'text/css'
     style.appendChild(doc.createTextNode(getCSS()))
@@ -53,6 +32,40 @@ function init({ isTest, isPreview, isTipZoom = true }) {
 
     doc.body.appendChild(div)
   }
+
+  // 如果是electron打印，不能创建 iframe，否则electron 打印时尺寸会不对
+  if (isElectronPrint) {
+    if (!doc) {
+      doc = document
+      createElement()
+    }
+  } else {
+    if (!$printer) {
+      $printer = window.document.createElement('iframe')
+      $printer.id = printerId
+      $printer.style.position = 'fixed'
+      $printer.style.top = '0'
+      $printer.frameborder = '0'
+      $printer.style.border = 'none'
+      $printer.style.width = '100%' // 使移动端可滚动
+      if (isTest) {
+        // 模板编辑[测试打印],隐藏起来
+        $printer.style.left = '-3000px'
+      } else {
+        $printer.style.left = '0px'
+        $printer.style.height = '100vh'
+      }
+      window.document.body.appendChild($printer)
+
+      const idocument = $printer.contentDocument
+      idocument.open()
+      idocument.write('<!DOCTYPE html><html><head></head><body></body></html>')
+      idocument.close()
+
+      doc = $printer.contentWindow.document
+      createElement()
+    }
+  }
 }
 
 function toDoPrint({ data, config }) {
@@ -75,9 +88,14 @@ function toDoPrint({ data, config }) {
   })
 }
 
-function toDoPrintBatch(list, isPrint = true, onReady) {
+function toDoPrintBatch(list, isPrint = true, onReady, isElectronPrint) {
   return new window.Promise(resolve => {
-    const $app = $printer.contentWindow.document.getElementById('appContainer')
+    let $app
+    if (isElectronPrint) {
+      $app = document.getElementById('appContainer')
+    } else {
+      $app = $printer.contentWindow.document.getElementById('appContainer')
+    }
 
     ReactDOM.unmountComponentAtNode($app)
     ReactDOM.render(
@@ -107,19 +125,26 @@ function doPrint({ data, config }, isTest) {
 function doBatchPrint(
   list,
   isTest,
-  extraConfig = { isPreview: false, isTipZoom: true, isPrint: true },
+  extraConfig = {
+    isPreview: false,
+    isTipZoom: true,
+    isPrint: true,
+    isElectronPrint: false
+  },
   onReady
 ) {
   init({
     isTest,
+    isElectronPrint: extraConfig.isElectronPrint,
     isPreview: extraConfig.isPreview,
     isTipZoom: extraConfig.isTipZoom
   })
 
   return toDoPrintBatch(
     list,
     extraConfig.isPrint && !extraConfig.isPreview,
-    onReady
+    onReady,
+    extraConfig.isElectronPrint
   )
 }