1.htmltocanvas，打印2.打印demo。

package.json

@@ -51,6 +51,7 @@
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
+    "html2canvas": "^1.4.1",
     "lodash-es": "^4.17.21",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
@@ -58,6 +59,7 @@
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "print-js": "^1.6.0",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",

src/utils/common.ts

@@ -0,0 +1,66 @@
+import html2canvas from "html2canvas";
+import printJS from "print-js";
+
+/**
+ * html转图片
+ * @param printContent 传入一个ref
+ * @param callback
+ */
+export const htmlToCanvas = (
+  printContent: HTMLElement,
+  callback: (url: string) => void
+) => {
+  // // 获取dom 宽度 高度
+  // const width = printContent.clientWidth;
+  // const height = printContent.clientHeight;
+  // // 创建一个canvas节点
+  // const canvas = document.createElement("canvas");
+  //
+  // const scale = 1; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
+  // canvas.width = width * scale; // 定义canvas 宽度 * 缩放
+  // canvas.height = height * scale; // 定义canvas高度 *缩放
+  // canvas.style.width = width * scale + "px";
+  // canvas.style.height = height * scale + "px";
+  // canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale
+  //
+  // const scrollTop =
+  //   document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
+  // const scrollLeft =
+  //   document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
+
+  html2canvas(printContent)
+    .then((canvas) => {
+      const url = canvas.toDataURL("image/png");
+      callback(url);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
+
+/**
+ * 用printJs打印图片
+ * @param url
+ * @param callback
+ */
+export const printImg = (url: string) => {
+  printJS({
+    printable: url,
+    type: "image",
+    documentTitle: "", // 标题
+    style: "@page{size:auto;margin: 1cm ;}", // 去除页眉页脚
+  });
+};
+
+/**
+ * html转图片打印
+ * @param dom
+ * @param callback
+ */
+export const html2CanvasPrint = (dom: HTMLElement, callback?: () => {}) => {
+  //1、html转图片
+  htmlToCanvas(dom, (url: string) => {
+    //2、打印图片
+    printImg(url);
+  });
+};