feat(Print): support cavas html element (#6203)

* refactor: 移除 console.log 语句

* refactor: 兼容 canvas 元素

* chore: bump version 9.7.1

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.1-beta07</Version>
+    <Version>9.7.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Print/PrintButton.razor.js

@@ -1,4 +1,4 @@
-import { getUID } from "../../modules/utility.js"
+import { insertBefore, getUID } from "../../modules/utility.js"
 import { showTooltip, removeTooltip } from "../Button/Button.razor.js"
 import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
@@ -23,48 +23,24 @@ export function init(id) {
 const print = el => {
     const modal = el.closest('.modal-content')
     if (modal) {
-        const modalBody = modal.querySelectorAll('.modal-body')
+        const modalBody = [...modal.querySelectorAll('.modal-body')];
         if (modalBody.length > 0) {
-            modalBody[0].querySelectorAll("input").forEach(ele => {
-                const id = ele.getAttribute('id')
-                if (!id) {
-                    ele.setAttribute('id', getUID())
-                }
-            })
-            const printContent = modalBody[0].innerHTML
+            modal.classList.add('d-none');
+
+            const dialog = modalBody.pop();
             const body = document.querySelector('body')
             body.classList.add('bb-printview-open')
-            const dialog = document.createElement('div')
-            dialog.classList.add('bb-printview')
-            dialog.innerHTML = printContent
-            body.appendChild(dialog)
-
-            // assign value
-            const elements = ["input", "textarea"];
-            elements.forEach(tag => {
-                console.log(tag);
-                dialog.querySelectorAll(tag).forEach(ele => {
-                    const id = ele.getAttribute('id')
-                    const vEl = document.getElementById(id)
-                    if (vEl) {
-                        if (ele.getAttribute('type') === 'checkbox') {
-                            const v1 = vEl.checked
-                            if (v1 === true) {
-                                ele.setAttribute('checked', 'checked')
-                            }
-                        }
-                        else {
-                            ele.value = vEl.value
-                        }
-                    }
-                });
-            });
+
+            const printContentEl = createPrintContent(dialog);
+            body.appendChild(printContentEl);
 
             const handler = setTimeout(() => {
                 clearTimeout(handler)
-                window.print()
+                window.print();
+                restoreCanvas(printContentEl);
                 body.classList.remove('bb-printview-open')
-                dialog.remove()
+                printContentEl.remove()
+                modal.classList.remove('d-none')
             }, 50)
         }
     }
@@ -76,6 +52,69 @@ const print = el => {
     }
 }
 
+const createPrintContent = content => {
+    content.querySelectorAll("input").forEach(ele => {
+        const id = ele.getAttribute('id')
+        if (!id) {
+            ele.setAttribute('id', getUID())
+        }
+    })
+    const dialog = document.createElement('div')
+    dialog.classList.add('bb-printview')
+    dialog.innerHTML = content.innerHTML
+
+    const elements = ["input", "textarea"];
+    elements.forEach(tag => {
+        dialog.querySelectorAll(tag).forEach(ele => {
+            const id = ele.getAttribute('id')
+            const vEl = document.getElementById(id)
+            if (vEl) {
+                if (ele.getAttribute('type') === 'checkbox') {
+                    const v1 = vEl.checked
+                    if (v1 === true) {
+                        ele.setAttribute('checked', 'checked')
+                    }
+                }
+                else {
+                    ele.value = vEl.value
+                }
+            }
+        });
+    });
+
+    const canvas = [...content.querySelectorAll('canvas')];
+    const targetCanvas = [...dialog.querySelectorAll('canvas')];
+    for (var i = 0; i < canvas.length; i++) {
+        const canvasEl = canvas[i];
+        createCanvasPlaceholder(canvasEl);
+        moveCanvas(canvasEl, targetCanvas[i]);
+    }
+
+    return dialog;
+}
+
+const createCanvasPlaceholder = canvas => {
+    const sectionEl = document.createElement('section');
+    sectionEl.classList.add('bb-print-canvas-placeholder');
+    insertBefore(canvas, sectionEl);
+}
+
+const moveCanvas = (canvas, target) => {
+    insertBefore(target, canvas);
+    target.remove();
+}
+
+const restoreCanvas = printContentEl => {
+    const canvas = [...printContentEl.querySelectorAll('canvas')];
+    const targetCanvas = [...document.querySelectorAll('.bb-print-canvas-placeholder')];
+    for (var i = 0; i < canvas.length; i++) {
+        const canvasEl = canvas[i];
+        const target = targetCanvas[i];
+        moveCanvas(canvasEl, target);
+        target.remove();
+    }
+}
+
 export function dispose(id) {
     const p = Data.get(id)
     Data.remove(id)