yh-hiprint 2.6.13 → 2.6.15

package/index.ts

@@ -0,0 +1,539 @@
+import './libs/jquery';
+import {
+  ElDialog,
+  ElSelect,
+  ElOption,
+  ElButton,
+  ElMessageBox,
+  ElLoading,
+  ElMessage,
+} from 'element-plus';
+import {createApp, createVNode} from 'vue';
+import {
+  hiprint,
+  defaultElementTypeProvider,
+  print,
+  print2,
+  usePaper,
+  useScale,
+  useDataSource,
+} from './hooks/useHiprint';
+export {hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource};
+export {default as fontSize} from './font-size';
+export {default as scale} from './scale';
+export {default as zIndex} from './z-index';
+export {default as panel} from './panel';
+import {getPrintTemplate} from './libs/index.js';
+export {default as defaultPrintElement} from './store/defaultPrintElement';
+export {getPrintTemplate};
+
+export function guid(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (t) {
+    var e = (16 * Math.random()) | 0;
+    return ('x' == t ? e : (3 & e) | 8).toString(16);
+  });
+}
+
+// 定义类型
+interface HiprintFunParams {
+  code: string;
+  params?: any;
+  data?: any;
+  isCustom?: boolean;
+  returnHtml?: boolean;
+}
+
+interface SilentHiprintParams {
+  code: string;
+  params?: any;
+  data?: any;
+}
+
+interface MessageEvent {
+  data: {
+    type: string;
+    data: any;
+  };
+}
+
+interface TemplateResponse {
+  status: number;
+  data?: {
+    json: string;
+  };
+  message?: string;
+}
+
+interface HiprintTemplate {
+  new (options: {template: any}): any;
+  getHtml(data: any): Array<{innerHTML: string}>;
+}
+
+interface CustomWindow extends Window {
+  silentHiprint: typeof silentHiprint;
+}
+
+export function cLog(string: string, isError: boolean = false): void {
+  if (isError) {
+    console.error(
+      '%cyhHiprint：%c',
+      'font-size: 16px;font-weight: bold;color: #00ffff',
+      'font-size: 16px;font-weight: bold;color: #ccccc',
+      string
+    );
+  } else {
+    console.log(
+      '%cyhHiprint%c ' + string,
+      'font-size: 18px;font-weight: bold;color: #61AFEF',
+      'font-size: 12px;color: #999'
+    );
+  }
+}
+
+const hiprintFun = async ({
+  code,
+  params,
+  data,
+  isCustom,
+  returnHtml,
+}: HiprintFunParams): Promise<any> => {
+  if (window.electronBrowserAPI && window.electronBrowserAPI.print) {
+    return clientPrintHandler(code, params, data);
+  } else {
+    const height: number = document.documentElement.clientHeight;
+    const width: number = 1200;
+    const left: number = (document.documentElement.clientWidth - 1200) / 2;
+    // 转换数组
+    let paramData: any = params;
+    if (!Array.isArray(params)) {
+      paramData = [params];
+    }
+    let url: string = '/hiprint/#/preview?code=' + encodeURIComponent(code);
+    if (params) {
+      url += `&params=${encodeURIComponent(JSON.stringify(paramData))}`;
+    }
+    if (data) {
+      url += `&data=${encodeURIComponent(JSON.stringify(data))}`;
+    }
+    if (isCustom) {
+      url += `&isCustom=${isCustom ? '1' : '0'}`;
+    }
+    if (returnHtml) {
+      url += `&returnHtml=${returnHtml ? '1' : '0'}`;
+    }
+    const windowOpen = window.open(
+      url,
+      'hiprintWindow',
+      `height=${height}, width=${width}, top=20, left=${left}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`
+    );
+
+    return new Promise((resolve, reject) => {
+      if (!windowOpen) {
+        reject('预览窗口渲染失败！');
+        return;
+      }
+      function printHTMLHandler(e: MessageEvent): void {
+        const {type, data} = e.data;
+        if (type === 'sendPrintHTML' && data) {
+          resolve(data);
+        }
+        window.removeEventListener('message', printHTMLHandler);
+      }
+      window.addEventListener('message', printHTMLHandler);
+    });
+  }
+};
+
+const silentHiprint = async ({
+  code,
+  params = {},
+  data,
+}: SilentHiprintParams): Promise<string | boolean> => {
+  if (!code || !data) {
+    ElMessageBox.alert('请正确的传递模板编号和打印数据', '提示');
+    return false;
+  }
+  let loading: any = null;
+  try {
+    loading = ElLoading.service({
+      text: '正在获取打印模板',
+    });
+    const res: TemplateResponse = await getPrintTemplate(code, params);
+    if (res.status === 200 && res.data && res.data.json) {
+      const json: string = res.data.json;
+      const hiprintTemplate: HiprintTemplate = new (hiprint as any).PrintTemplate({
+        template: JSON.parse(json),
+      });
+      const html: Array<{innerHTML: string}> = hiprintTemplate.getHtml(data);
+      if (html[0]) {
+        return html[0].innerHTML;
+      } else {
+        ElMessageBox.alert('打印内容渲染失败', '提示');
+      }
+    } else {
+      ElMessageBox.alert(res.message || '获取打印模板失败', '提示');
+    }
+  } catch (error) {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+    console.error(error);
+  } finally {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+  }
+  return false;
+};
+
+(window as unknown as CustomWindow).silentHiprint = silentHiprint;
+
+interface InstallOptions {
+  router?: any;
+  pinia?: any;
+  isAdmin?: boolean;
+  isNew?: boolean;
+  addInitTask: (any) => {}
+}
+
+// 客户端打印处理函数
+const clientPrintHandler = async (code, params, data) => {
+  let loading = null;
+  try {
+    loading = ElLoading.service({
+      text: '正在获取打印模板',
+    });
+    let reqParams = [];
+    try {
+      reqParams = params ? JSON.parse(params) : [];
+    } catch (error) {
+      console.error(error);
+    }
+    // 获取打印模板
+    let res = await getPrintTemplate(code, reqParams);
+    if (res.status !== 200 || !res.data || !res.data.json) {
+      ElMessageBox.alert(res.message || '获取打印模板失败', '提示');
+      return false;
+    }
+
+    loading.setText('正在连接打印客户端');
+
+    // 获取打印机列表
+    let printerList = await electronBrowserAPI.getPrinterList();
+    if (!printerList || printerList.length === 0) {
+      loading?.close();
+      ElMessageBox.alert('未获取到打印机列表', '提示');
+      return false;
+    }
+
+    loading.close();
+    loading = null;
+
+    // 显示选择打印机的对话框
+    return await showPrinterSelectionDialog(
+      printerList,
+      res.data.json,
+      res.data.list,
+      res.data.name,
+      data
+    );
+  } catch (error) {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+    console.error(error);
+    ElMessageBox.alert('客户端打印出错: ' + error.message, '提示');
+    return false;
+  }
+};
+
+// 显示打印机选择对话框
+const showPrinterSelectionDialog = (
+  printerList,
+  templateJson,
+  templateData,
+  templateName,
+  data
+) => {
+  return new Promise((resolve) => {
+    // 获取上次选择的打印机
+    const lastSelectedPrinter = localStorage.getItem('lastSelectedPrinter') || '';
+
+    let json = {};
+    try {
+      json = JSON.parse(templateJson);
+    } catch (error) {
+      console.error('客户端打印解析模板失败：', error);
+      ElMessageBox.alert('客户端打印解析模板失败', '提示');
+      document.body.removeChild(mountPoint);
+      resolve(false);
+      return;
+    }
+    // 创建挂载点
+    const mountPoint = document.createElement('div');
+    document.body.appendChild(mountPoint);
+
+    // 创建Vue组件
+    const PrinterSelectorComponent = {
+      components: {
+        ElDialog,
+        ElSelect,
+        ElOption,
+        ElButton,
+      },
+      data() {
+        return {
+          visible: true,
+          selectedPrinter: lastSelectedPrinter,
+          printerList: printerList,
+        };
+      },
+      methods: {
+        handlePrint: async function () {
+          if (!this.selectedPrinter) {
+            ElMessageBox.alert('请选择打印机', '提示');
+            return;
+          }
+          // 保存选择的打印机
+          localStorage.setItem('lastSelectedPrinter', this.selectedPrinter);
+
+          let loading = ElLoading.service({
+            text: '正在渲染打印内容',
+          });
+
+          try {
+            // 创建打印模板实例
+            let hiprintTemplate = new hiprint.PrintTemplate({template: json});
+
+            loading.setText('正在发送打印任务');
+            const newGuid = guid();
+            const printOption = {
+              printer: this.selectedPrinter,
+              title: templateName,
+              imgToBase64: true,
+              id: newGuid,
+              templateId: newGuid,
+              pageSize: {
+                width: (json?.panels[0]?.width || 210) * 1000,
+                height: (json?.panels[0]?.height || 297) * 1000,
+              },
+            };
+            const pCss = `<style rel="stylesheet" type="text/css">${printCss}</style>`;
+            const html = hiprintTemplate.getHtml(data || templateData, printOption)[0].outerHTML;
+
+            printOption.html = `${pCss}${html}`;
+
+            // 监听打印结果
+            const handlePrintResult = (event) => {
+              if (event.data && event.data.type) {
+                switch (event.data.type) {
+                  case 'PRINT_SUCCESS':
+                    loading.close();
+                    this.handleClose(true);
+                    ElMessage.success('打印任务已发送到打印机');
+                    // 移除事件监听器
+                    window.removeEventListener('message', handlePrintResult);
+                    clearTimeout(timeoutId);
+                    break;
+                  case 'PRINT_ERROR':
+                    loading.close();
+                    const error = event.data.data;
+                    ElMessageBox.alert('打印失败: ' + (error.msg || '未知错误'), '提示');
+                    this.handleClose(false);
+                    // 移除事件监听器
+                    window.removeEventListener('message', handlePrintResult);
+                    clearTimeout(timeoutId);
+                    break;
+                  default:
+                    break;
+                }
+              }
+            };
+
+            // 添加事件监听器
+            window.addEventListener('message', handlePrintResult);
+
+            // 添加超时机制，防止监听器泄漏
+            const timeoutId = setTimeout(() => {
+              window.removeEventListener('message', handlePrintResult);
+              loading.close();
+              ElMessageBox.alert('打印超时', '提示');
+              this.handleClose(false);
+            }, 60 * 1000); // 30秒超时
+
+            // 发送到客户端打印
+            try {
+              electronBrowserAPI.print(printOption);
+            } catch (error) {
+              console.error('客户端打印发送失败：', error);
+              loading.close();
+              window.removeEventListener('message', handlePrintResult);
+              clearTimeout(timeoutId);
+              ElMessageBox.alert('客户端打印发送失败: ' + error.message, '提示');
+              this.handleClose(false);
+            }
+          } catch (error) {
+            if (loading) {
+              loading.close();
+            }
+            console.error(error);
+            ElMessageBox.alert('打印过程中发生错误: ' + error.message, '提示');
+            this.handleClose(false);
+          }
+        },
+        handleClose: function (result = false) {
+          this.visible = false;
+          // 移除固定延迟，直接执行卸载逻辑
+          app.unmount();
+          document.body.removeChild(mountPoint);
+          resolve(result);
+        },
+      },
+      render() {
+        return createVNode(
+          ElDialog,
+          {
+            modelValue: this.visible,
+            title: '选择打印机',
+            width: '500px',
+            onClose: () => this.handleClose(false),
+            onClosed: () => this.handleClose(false),
+          },
+          {
+            default: () => [
+              createVNode(
+                ElSelect,
+                {
+                  modelValue: this.selectedPrinter,
+                  'onUpdate:modelValue': (val) => {
+                    this.selectedPrinter = val;
+                  },
+                  placeholder: '请选择打印机',
+                  style: 'width: 100%; margin-bottom: 15px;',
+                },
+                {
+                  default: () =>
+                    this.printerList.map((printer) =>
+                      createVNode(ElOption, {
+                        key: printer.name,
+                        label: printer.name,
+                        value: printer.name,
+                      })
+                    ),
+                }
+              ),
+            ],
+            footer: () => [
+              createVNode('span', {class: 'dialog-footer'}, [
+                createVNode(
+                  ElButton,
+                  {
+                    onClick: () => this.handleClose(false),
+                  },
+                  {
+                    default: () => '取消',
+                  }
+                ),
+                createVNode(
+                  ElButton,
+                  {
+                    type: 'primary',
+                    onClick: this.handlePrint,
+                  },
+                  {
+                    default: () => '打印',
+                  }
+                ),
+              ]),
+            ],
+          }
+        );
+      },
+    };
+
+    // 创建应用实例
+    const app = createApp(PrinterSelectorComponent);
+
+    // 挂载应用
+    app.mount(mountPoint);
+  });
+};
+
+// window.silentHiprint = silentHiprint;
+
+// 添加必要的类型定义
+interface ElectronBrowserAPI {
+  print: (options: any) => void;
+  getPrinterList: () => Promise<any[]>;
+}
+
+declare global {
+  interface Window {
+    electronBrowserAPI?: ElectronBrowserAPI;
+  }
+}
+
+// 导入打印样式
+import printCss from './libs/css/hiprint.css?inline';
+
+export default {
+  install(
+    app: any,
+    {router, pinia, clientPrint = false,isNew = false, addInitTask}: InstallOptions & {clientPrint?: boolean}
+  ): void {
+    app.provide('$hiprint', hiprintFun);
+    app.provide('$silentHiprint', silentHiprint);
+
+    if(isNew) {
+      addInitTask(async () => {
+        if (!router || router.hasRoute('Index')) return;
+        router.addRoute('Index', {
+          path: 'hiprint/designer',
+          name: '打印设计器',
+          meta: {
+            icon: 'md-planet',
+            title: '打印设计器',
+          },
+          component: () => import('./HiprintDesigner.vue'),
+        });
+        router.addRoute({
+          path: '/preview',
+          name: 'printView',
+          meta: {
+            icon: 'md-planet',
+            title: 'printView',
+          },
+          component: () => import('./hiprintPreview.vue'),
+        });
+      })
+    } else {
+      if (router) {
+        router.addRoute('Index', {
+          path: 'hiprint/designer',
+          name: '打印设计器',
+          meta: {
+            icon: 'md-planet',
+            title: '打印设计器',
+          },
+          component: () => import('./HiprintDesigner.vue'),
+        });
+        router.addRoute({
+          path: '/preview',
+          name: 'printView',
+          meta: {
+            icon: 'md-planet',
+            title: 'printView',
+          },
+          component: () => import('./hiprintPreview.vue'),
+        });
+      } else {
+        if (!router) {
+          cLog('没有传递 router 对象，所以无法将路由添加到应用中', true);
+        }
+      }
+    }
+  },
+};

package/libs/index.js

@@ -1,6 +1,6 @@
-import axios from '@/libs/api.request.js';
+import http from '@/libs/api.request';
 export function getPrintTemplate (code, reqParams) {
-  return axios
+  return http
     .request({
       url: `/printTemplate/data/${code}`,
       method: 'post',

package/libs/previewHiprint.ts

@@ -0,0 +1,55 @@
+// @ts-ignore
+import axios from '@/libs/api.request';
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {hiprint} from 'yh-hiprint';
+
+export default async function (code) {
+  let {
+    data: {list, json},
+  } = await axios.request({
+    url: `/printTemplate/data/${code}`,
+    method: 'post',
+    type: 'json',
+    data: [
+      {
+        code: '50101820',
+      },
+    ],
+  });
+  if (json) {
+    if (Array.isArray(list) && list.length > 0) {
+      list = list.map((item) => {
+        let printData = {};
+        let datas = Object.entries(item);
+        datas.forEach((arr) => {
+          if (Array.isArray(arr[1])) {
+            printData[arr[0]] = arr[1];
+          } else {
+            if (arr[1] !== null && arr[1] !== undefined) {
+              let itemsEntries = Object.entries(arr[1]);
+              itemsEntries.forEach((cArr) => {
+                printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
+              });
+            }
+          }
+        });
+        return printData;
+      });
+    } else {
+      list = [];
+    }
+    const htmlStr = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
+    ElMessageBox.alert(htmlStr, '打印预览', {
+      customClass: 'print-preview-dialog',
+      dangerouslyUseHTMLString: true,
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      closeOnHashChange: true,
+      showConfirmButton: false,
+    });
+  } else {
+    ElMessage.warning({
+      message: '模板配置不存在，请检查',
+    });
+  }
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "yh-hiprint",
-  "version": "2.6.13",
+  "version": "2.6.15",
   "description": "Hiprint for Vue3 by NoahLiu in ForceCon in Hunan Changesha",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    }
+  },
   "scripts": {
     "start": "npm run pub:aliyun && npm run pub:npm",
     "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --tag latest --no-git-checks",
@@ -17,7 +22,8 @@
     "nzh": "1.0.9"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
   },
   "author": "Liubin"
 }