出入库明细单打印功能调整，新引入三方库:html2Canvas,jsPdf,vue-office

zuozhengqing

2023-11-29 563c60ab9d465e275bf18b57fde7b51c4bc020da

出入库明细单打印功能调整，新引入三方库:html2Canvas,jsPdf,vue-office

 package-lock.json

@@ -8,13 +8,18 @@
      "name": "crm-web",
      "version": "0.1.0",
      "dependencies": {
        "@vue-office/excel": "^1.4.7",
        "axios": "^1.4.0",
        "core-js": "^3.8.3",
        "docx-preview": "^0.1.18",
        "downloadjs": "^1.4.7",
        "element-ui": "^2.15.13",
        "html2canvas": "^1.4.1",
        "js-cookie": "^3.0.5",
        "jspdf": "^2.5.1",
        "vue": "^2.6.14",
        "vue-cropper": "^0.6.4",
        "vue-demi": "^0.13.11",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
      },
@@ -1749,7 +1754,6 @@
      "version": "7.22.10",
      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.10.tgz",
      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -2295,6 +2299,12 @@
      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
      "dev": true
    },
    "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",
@@ -2353,6 +2363,22 @@
      "dev": true,
      "dependencies": {
        "@types/node": "*"
      }
    },
    "node_modules/@vue-office/excel": {
      "version": "1.4.7",
      "resolved": "https://registry.npmjs.org/@vue-office/excel/-/excel-1.4.7.tgz",
      "integrity": "sha512-ouwgxE0tDp9amNx/itQLNmWIi9EmRpEJZ64YWOIuN65InYu+77qU6xi13iJvt1wvwtfQ3GN7aNUqWzMU8KLOjg==",
      "hasInstallScript": true,
      "peerDependencies": {
        "@vue/composition-api": "^1.7.1",
        "vue": "^2.0.0 || >=3.0.0",
        "vue-demi": "^0.13.11"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        }
      }
    },
    "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
@@ -3427,6 +3453,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.15",
      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.15.tgz",
@@ -3572,6 +3609,14 @@
      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
    "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/base64-js": {
      "version": "1.5.1",
@@ -3726,6 +3771,17 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
    "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": {
      "version": "5.7.1",
      "resolved": "https://registry.npmmirror.com/buffer/-/buffer-5.7.1.tgz",
@@ -3806,6 +3862,31 @@
      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
      "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==",
      "dev": true
    },
    "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/canvg/node_modules/regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
      "optional": true
    },
    "node_modules/case-sensitive-paths-webpack-plugin": {
      "version": "2.4.0",
@@ -4345,6 +4426,14 @@
      },
      "peerDependencies": {
        "postcss": "^8.0.9"
      }
    },
    "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": {
@@ -4926,6 +5015,12 @@
      "engines": {
        "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",
@@ -5894,6 +5989,11 @@
        "node": ">=0.8.0"
      }
    },
    "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/figures": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
@@ -6421,6 +6521,18 @@
      },
      "peerDependencies": {
        "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": {
@@ -6960,6 +7072,23 @@
      },
      "optionalDependencies": {
        "graceful-fs": "^4.1.6"
      }
    },
    "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/jszip": {
@@ -8522,6 +8651,12 @@
        "node": ">=8"
      }
    },
    "node_modules/performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
      "optional": true
    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -9260,6 +9395,15 @@
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
    "node_modules/raf": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
      "optional": true,
      "dependencies": {
        "performance-now": "^2.1.0"
      }
    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
@@ -9387,8 +9531,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.14.0",
      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
      "dev": true
      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
    },
    "node_modules/regenerator-transform": {
      "version": "0.15.2",
@@ -9557,6 +9700,15 @@
      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz",
      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
      "dev": true
    },
    "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",
@@ -10103,6 +10255,15 @@
      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
      "dev": true
    },
    "node_modules/stackblur-canvas": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
      "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",
@@ -10247,6 +10408,15 @@
      "dev": true,
      "engines": {
        "node": ">= 0.4"
      }
    },
    "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/svg-tags": {
@@ -10439,6 +10609,14 @@
      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
      "dev": true
    },
    "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",
@@ -10722,6 +10900,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",
@@ -10765,6 +10951,36 @@
        "csstype": "^3.1.0"
      }
    },
    "node_modules/vue-cropper": {
      "version": "0.6.4",
      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.6.4.tgz",
      "integrity": "sha512-U3bm17Li/Xwfw2t3pr8/hFE/tYhvwIWqepHK9IFC1TnX1KFd64VyfCD9nMBhPY91RyvMC6jSQgT/DyDNKuTpIQ=="
    },
    "node_modules/vue-demi": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
      "hasInstallScript": true,
      "bin": {
        "vue-demi-fix": "bin/vue-demi-fix.js",
        "vue-demi-switch": "bin/vue-demi-switch.js"
      },
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "@vue/composition-api": "^1.0.0-rc.1",
        "vue": "^3.0.0-0 || ^2.6.0"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        }
      }
    },
    "node_modules/vue-eslint-parser": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

 package.json

@@ -10,14 +10,18 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@vue-office/excel": "^1.4.7",
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "docx-preview": "^0.1.18",
    "downloadjs": "^1.4.7",
    "element-ui": "^2.15.13",
    "html2canvas": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jspdf": "^2.5.1",
    "vue": "^2.6.14",
    "vue-cropper": "^0.6.4",
    "vue-demi": "^0.13.11",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

 src/router/product/index.js

@@ -6,6 +6,7 @@
const productCategory = (resolve) => require(["@/views/productManage/productCategory/index"], resolve) // 产品类别
const productList = (resolve) => require(["@/views/productManage/productCategory/ProductList"], resolve) // 产品类别-产品
const overviewList = (resolve) => require(["@/views/overview/OverviewListView"], resolve) // 概述-产品列表
const previewExcel = (resolve) => require(["@/views/overview/previewExcel"], resolve) // 概述-产品列表
const reorderRules = (resolve) => require(["@/views/productManage/reorderRules/index"], resolve) // 重订货规则

const appconfig = [
@@ -58,6 +59,14 @@
    }
  },
  {
    path: "/overview/previewExcel",
    name: "previewExcel",
    component: previewExcel,
    meta: {
      title: "预览Excel"
    }
  },
  {
    path: "/productManage/reorderRules",
    name: "reorderRules",
    component: reorderRules,

 src/views/overview/AddOverviewDialog.vue

@@ -902,11 +902,18 @@
      await printReceipts(this.editCommonConfig.infomation.id).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success("打印成功")
          const link = document.createElement('a');
          link.href = res.data;
          link.download = '出库单.xlsx';
          link.click();
          // this.$message.success("打印成功")
          // const link = document.createElement('a');
          // link.href = res.data;
          // link.download = '出库单.xlsx';
          // link.click();
          this.$router.push({
            name:"previewExcel",
            params:{
              url:res.data,
              baseOperationType:this.editConfig.infomation.baseOperationType||undefined,
            }
          })
        }
      })
    }

 src/views/overview/previewExcel.vue

New file
@@ -0,0 +1,101 @@
<template>
  <div>
    <div ref="elementToCrop" >
      <div style="width: 100%;">
        <vue-office-excel :minRowLength="0"  :src="excel" @rendered="rendered"/>
      </div>
    </div>
  </div>
</template>

<script>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  name:"previewExcel",
  props: {
  },
  data() {
    return {
      excel: '',//excel文档地址
      cutWidth:200,
    };
  },
  computed: {
  },
  created() {
    if(this.$route.params.baseOperationType!=undefined){
      this.excel=this.$route.params.url
      if(this.this.$route.params.baseOperationType===1){
        this.cutWidth=200
      }else if(this.this.$route.params.baseOperationType===2){
        this.cutWidth=315
      }
    }
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    rendered(){
      console.log("渲染完成")
      if(this.$route.params.baseOperationType!=undefined){
        this.excel=this.$route.params.url
        this.cropAndDownload()
      }
    },
    async cropAndDownload() {
      const elementToCrop = this.$refs.elementToCrop;
      const canvas = await html2canvas(elementToCrop);
      const croppedCanvas = document.createElement("canvas");
      const croppedContext = croppedCanvas.getContext("2d");
      croppedCanvas.width = canvas.width - this.cutWidth; // 去掉左右各100px
      croppedCanvas.height = canvas.height - 100; // 去掉上下各100px
      // 在新的Canvas上绘制裁剪后的图像
      croppedContext.drawImage(
        canvas,
        50, // 开始裁剪的左侧位置
        20, // 开始裁剪的上侧位置
        croppedCanvas.width, // 裁剪后的宽度
        croppedCanvas.height-300, // 裁剪后的高度
        0, // 新Canvas中绘制的左侧位置
        0, // 新Canvas中绘制的上侧位置
        croppedCanvas.width, // 新Canvas中绘制的宽度
        croppedCanvas.height // 新Canvas中绘制的高度
      );
      // 将裁剪后的Canvas转换为DataURL
      const croppedImage = croppedCanvas.toDataURL("image/png");
      // 更新数据，以在页面上显示裁剪后的图片
      this.croppedImage = croppedImage;
      // 创建PDF文档
      const pdf = new jsPDF({
        unit:"mm",
        format:"a4"
      });
      // A4
      const a4Width = 210;
      const a4Height = 297;
      // 计算缩放比例，确保canvas等比例缩放适应A4纸
      const scale = Math.min(a4Width / canvas.width, a4Height / canvas.height);
      // 计算缩放后的宽高
      const scaledWidth = canvas.width * scale;
      const scaledHeight = canvas.height * scale;
      // 将canvas元素转换为png，插入到PDF文档中
      pdf.addImage(croppedImage, "PNG",0,0,scaledWidth,scaledHeight);
      // 保存PDF文档
      pdf.save("export.pdf");
    },
  },
  components: {
    VueOfficeExcel,
  },
};
</script>
<style scoped lang="scss">
.vue-office-excel{
  height: 1000px;
}
</style>

 src/views/reportForm/inboundOutboundDetail/index.vue

@@ -211,15 +211,17 @@
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
          if (res.code === 200&&res.data) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data
            this.pagerOptions.totalCount = res.total
            this.tableList.tableInfomation = res.data||[]
          }else{
            this.tableList.tableInfomation = res.data||[]
          }
          this.pagerOptions.totalCount = res.total
        })
      } else {
        await getHistory({
@@ -228,7 +230,7 @@
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
          if (res.code === 200&&res.data) {
            res.data.map((item)=>{
                if(item.status===""){
                  item.status=4
@@ -237,9 +239,11 @@
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data?res.data:[]
            this.pagerOptions.totalCount = res.total
            this.tableList.tableInfomation = res.data||[]
          }else{
            this.tableList.tableInfomation = res.data||[]
          }
          this.pagerOptions.totalCount = res.total
        })
      }
    },

 src/views/reportForm/outboundDetail/index.vue

@@ -14,7 +14,7 @@
      </div>
    </div>
    <!-- 编辑 -->
    <AddOverviewDialog v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
    <AddOverviewDialog :workType="workType" v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
  </div>
</template>

@@ -23,7 +23,9 @@
import { getHistory,getOperationInfo } from "@/api/reportForm/inventoryRwport"
// import { getProductOperatonList } from "@/api/product/product"

import AddOverviewDialog from "@/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue"
// import AddOverviewDialog from "@/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue"
import AddOverviewDialog from "@/views/overview/AddOverviewDialog"

import { getDataByType } from "@/api/data"
export default {
  name: "outboundDetail",
@@ -33,6 +35,7 @@
  computed: {},
  data() {
    return {
      workType:2,
      tableList: {},
      showcol: ["状态"],
      searchOptions: [],
@@ -196,15 +199,17 @@
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
          if (res.code === 200&&res.data) {
            res.data.map((item) => {
              let dateObject = new Date(item.date);
              let formattedDateString = dateObject.toISOString().split('T')[0];
              item.date = formattedDateString
            })
            this.tableList.tableInfomation = res.data
            this.pagerOptions.totalCount = res.total
            this.tableList.tableInfomation = res.data||[]
          }else{
            this.tableList.tableInfomation = res.data||[]
          }
          this.pagerOptions.totalCount = res.total
        })
      } else {
        await getHistory({
@@ -213,7 +218,7 @@
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
          if (res.code === 200&&res.data) {
            res.data.map((item) => {
              if(item.status===""){
                item.status=4
@@ -222,9 +227,11 @@
              let formattedDateString = dateObject.toISOString().split('T')[0];
              item.date = formattedDateString
            })
            this.tableList.tableInfomation = res.data ? res.data : []
            this.pagerOptions.totalCount = res.total
            this.tableList.tableInfomation = res.data || []
          }else{
            this.tableList.tableInfomation = res.data || []
          }
          this.pagerOptions.totalCount = res.total
        })
      }
    },