导出为pdf的demo

package-lock.json

@@ -21,8 +21,10 @@
         "axios": "^1.1.3",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.0",
+        "html2canvas": "^1.4.1",
         "js-base64": "^3.7.3",
         "js-export-excel": "^1.1.4",
+        "jspdf": "^2.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.4",
@@ -3985,6 +3987,12 @@
       "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -4999,6 +5007,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -5340,6 +5359,14 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
@@ -5506,6 +5533,17 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5585,6 +5623,25 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz",
       "integrity": "sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ=="
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -6060,6 +6117,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -6710,6 +6775,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
@@ -7859,6 +7930,11 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8651,6 +8727,18 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -11312,6 +11400,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmmirror.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -14946,6 +15051,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -15542,6 +15656,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
@@ -15799,6 +15922,15 @@
       "resolved": "https://registry.npmmirror.com/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/svgo/-/svgo-1.3.2.tgz",
@@ -16040,6 +16172,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -16418,6 +16558,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
@@ -20261,6 +20409,12 @@
       "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
     },
+    "@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -21107,6 +21261,11 @@
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -21374,6 +21533,11 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
@@ -21514,6 +21678,11 @@
         "node-int64": "^0.4.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -21578,6 +21747,22 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz",
       "integrity": "sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ=="
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -21951,6 +22136,14 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -22458,6 +22651,12 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
@@ -23372,6 +23571,11 @@
         "bser": "2.1.1"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -23993,6 +24197,15 @@
         "tapable": "^2.0.0"
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -26057,6 +26270,21 @@
       "resolved": "https://registry.npmmirror.com/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmmirror.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -28652,6 +28880,12 @@
       "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -29138,6 +29372,12 @@
         }
       }
     },
+    "stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
@@ -29341,6 +29581,12 @@
       "resolved": "https://registry.npmmirror.com/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/svgo/-/svgo-1.3.2.tgz",
@@ -29531,6 +29777,14 @@
         "minimatch": "^3.0.4"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -29827,6 +30081,14 @@
       "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",

package.json

@@ -16,8 +16,10 @@
     "axios": "^1.1.3",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.0",
+    "html2canvas": "^1.4.1",
     "js-base64": "^3.7.3",
     "js-export-excel": "^1.1.4",
+    "jspdf": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
@@ -29,9 +31,7 @@
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
-    "web-vitals": "^2.1.4",
-    "html2canvas": "^1.3.2",
-    "jspdf": "^2.4.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "dev": "react-app-rewired start",
@@ -64,4 +64,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

src/pages/A6_1ques/index.module.scss

@@ -10,19 +10,27 @@
 
     .A6_1tableBox {
       border-radius: 10px;
-      margin-top: 15px;
       height: calc(100% - 77px);
       background-color: #fff;
+      margin-top: 15px;
       // overflow: hidden;
       overflow-y: auto;
+
       text-align: center;
 
-      img {
-        display: block;
-        margin: 10px auto;
-        max-width: 800px;
-        max-height: 500px;
+
+      #pdfDownBox {
+        padding: 20px 0;
+
+        img {
+          display: block;
+          margin: 0px auto;
+          max-width: 800px;
+          max-height: 500px;
+        }
       }
+
+
     }
   }
 }

src/pages/A6_1ques/index.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { Button, Input } from "antd";
 import { useDispatch } from "react-redux";
+import { downloadPDF } from "@/utils/htmlToPdf";
+import downloadPDF2 from "@/utils/htmlToPdf2";
 function A6_1ques() {
   const dispatch = useDispatch();
 
@@ -70,61 +72,72 @@ function A6_1ques() {
           <Button type="primary" onClick={() => setAddId(-1)}>
             新增
           </Button>
+          <Button
+            onClick={() =>
+              downloadPDF(document.querySelector("#pdfDownBox")!, "出库信息")
+            }
+          >
+            导出PDF1
+          </Button>
+          <Button
+            onClick={() =>
+              downloadPDF2(document.querySelector("#pdfDownBox")!, "出库信息")
+            }
+          >
+            导出PDF2
+          </Button>
         </div>
       </div>
 
       {/* 表格主体 */}
       <div className="A6_1tableBox">
-        <img
-          src="https://sit-chaozhoubwg.4dage.com/poster/tab2Poster/thumb/20240129_1114311892.jpg"
-          alt=""
-        />
-
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-        <h1>9999999999</h1>
-
-        <img
-          src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
-          alt=""
-        />
+        <div id="pdfDownBox">
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/poster/tab2Poster/thumb/20240129_1114311892.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />{" "}
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />{" "}
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <img
+            src="https://sit-chaozhoubwg.4dage.com/exhibition/img/1.jpg"
+            alt=""
+          />
+          <h1>115555654</h1>
+        </div>
 
         {/* <MyTable
           yHeight={625}

src/utils/htmlToPdf.ts

@@ -0,0 +1,52 @@
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { domShowFu } from "./domShow";
+
+export const downloadPDF = (element: HTMLDivElement, pdfName: string) => {
+  if (element) {
+    domShowFu("#AsyncSpinLoding", true);
+
+    let width = element.offsetWidth / 4;
+    let height = element.offsetHeight / 4;
+    let limit = 14400;
+    if (height > limit) {
+      let contentScale = limit / height;
+      height = limit;
+      width *= contentScale;
+    }
+    html2canvas(element, {
+      // scale: 1,
+      useCORS: true,
+      backgroundColor: "#FFFFFF",
+      allowTaint: false,
+      ignoreElements: (element: { id: string }) => {
+        if (element.id === "ignoreBtnElement") return true;
+        return false;
+      },
+    }).then((canvas) => {
+      let context: any = canvas.getContext("2d");
+      let orientation;
+      if (context) {
+        context.mozImageSmoothingEnabled = false;
+        context.webkitImageSmoothingEnabled = false;
+        context.msImageSmoothingEnabled = false;
+        context.imageSmoothingEnabled = false;
+      }
+      let pageData = canvas.toDataURL("image/jpg", 1.0);
+      let img = new Image();
+      img.src = pageData;
+      img.onload = function () {
+        img.width /= 2;
+        img.height /= 2;
+        img.style.transform = "scale(0.5)";
+        let pdf;
+        orientation = width > height ? "l" : "p";
+        pdf = new jsPDF(orientation as "l", "mm", [width, height]);
+        pdf.addImage(pageData, "jpeg", 0, 0, width, height);
+        pdf.save(pdfName + ".pdf");
+
+        domShowFu("#AsyncSpinLoding", false);
+      };
+    });
+  }
+};

src/utils/htmlToPdf2.ts

@@ -0,0 +1,94 @@
+import html2canvas from "html2canvas";
+import JsPDF from "jspdf";
+import { domShowFu } from "./domShow";
+
+/**
+ * @param  ele          要生成 pdf 的DOM元素（容器）
+ * @param  padfName     PDF文件生成后的文件名字
+ * */
+
+function downloadPDF2(ele: HTMLDivElement, pdfName: string) {
+
+  domShowFu("#AsyncSpinLoding", true);
+
+  const eleW = ele.offsetWidth; // 获得该容器的宽
+  const eleH = ele.offsetHeight; // 获得该容器的高
+
+  const eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
+  const eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
+
+  const canvas = document.createElement("canvas");
+  let abs = 0;
+
+  const win_in =
+    document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
+  const win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+  if (win_out > win_in) {
+    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
+    abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
+    // console.log(a, '新abs');
+  }
+
+  canvas.width = eleW * 2; // 将画布宽&&高放大两倍
+  canvas.height = eleH * 2;
+
+  const context = canvas.getContext("2d")!;
+
+  context.scale(2, 2);
+
+  context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
+  // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+  // translate的时候，要把这个差值去掉
+
+  // html2canvas(element).then( (canvas)=>{ //报错
+  // html2canvas(element[0]).then( (canvas)=>{
+  html2canvas(ele, {
+    // dpi: 300,
+    // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+    useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+    backgroundColor: "#FFFFFF",
+  }).then((canvas) => {
+    const contentWidth = canvas.width;
+    const contentHeight = canvas.height;
+    // 一页pdf显示html页面生成的canvas高度;
+    const pageHeight = (contentWidth / 592.28) * 841.89;
+    // 未生成pdf的html页面高度
+    let leftHeight = contentHeight;
+    // 页面偏移
+    let position = 0;
+    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    const imgWidth = 595.28;
+    const imgHeight = (595.28 / contentWidth) * contentHeight;
+
+    const pageData = canvas.toDataURL("image/jpeg", 1.0);
+
+    const pdf = new JsPDF(undefined, "pt", "a4");
+
+    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+    // 当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+      pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
+      // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+    } else {
+      // 分页
+      while (leftHeight > 0) {
+        pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        // 避免添加空白页
+        if (leftHeight > 0) {
+          pdf.addPage();
+        }
+      }
+    }
+
+    // 可动态生成
+    pdf.save(pdfName);
+
+    domShowFu("#AsyncSpinLoding", false);
+  });
+}
+
+export default downloadPDF2;