From ff86415e10e7a91e6bbe26c560072f4069c582c4 Mon Sep 17 00:00:00 2001 From: zhc077 <565291854> Date: Wed, 1 Feb 2023 17:55:25 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A1=E5=88=92=E5=B7=A5=E5=BA=8F=E7=AE=A1?= =?UTF-8?q?=E7=90=86-=E7=89=A9=E6=96=99=E5=8D=95=E4=B8=8B=E8=BD=BD=202.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ant-design-vue-jeecg/package.json | 65 +++++----- ant-design-vue-jeecg/src/mixins/htmlToPdf.js | 90 ++++++++++++++ ant-design-vue-jeecg/src/utils/htmlToPdf.js | 90 ++++++++++++++ .../views/productplan/ProductplanManage.vue | 4 +- .../src/views/productplan/TestPdf.vue | 28 +++++ .../productplan/ZyPlanWuLiaoDataDetail.vue | 116 +++++++++--------- 6 files changed, 308 insertions(+), 85 deletions(-) create mode 100644 ant-design-vue-jeecg/src/mixins/htmlToPdf.js create mode 100644 ant-design-vue-jeecg/src/utils/htmlToPdf.js create mode 100644 ant-design-vue-jeecg/src/views/productplan/TestPdf.vue diff --git a/ant-design-vue-jeecg/package.json b/ant-design-vue-jeecg/package.json index 49a2b6b6..a4ce6cf2 100644 --- a/ant-design-vue-jeecg/package.json +++ b/ant-design-vue-jeecg/package.json @@ -10,50 +10,54 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "ant-design-vue": "^1.7.2", "@antv/data-set": "^0.11.4", - "viser-vue": "^2.4.8", + "@jeecg/antd-online-mini": "^3.4.3-beta2", + "@jiaminghi/data-view": "^2.10.0", + "@tinymce/tinymce-vue": "2.1.0", + "@toast-ui/editor": "^2.1.2", + "ant-design-vue": "^1.7.2", + "area-data": "^5.0.6", "axios": "^0.18.0", + "china-area-data": "^5.0.1", + "clipboard": "^2.0.4", + "codemirror": "^5.46.0", + "cron-parser": "^2.10.0", "dayjs": "^1.8.0", + "dircountdown": "^1.1.0", + "dom-align": "1.12.0", + "echarts": "^5.3.0", + "element-ui": "^2.15.6", "enquire.js": "^2.1.6", + "html2canvas": "^1.4.1", + "jquery": "^3.6.0", "js-cookie": "^2.2.0", + "jspdf": "^2.5.1", "lodash.get": "^4.4.2", "lodash.pick": "^4.4.0", "md5": "^2.2.1", "nprogress": "^0.2.0", + "qiankun": "^2.5.1", + "qs": "^6.10.3", + "tinymce": "5.4.1", + "viser-vue": "^2.4.8", "vue": "^2.6.10", + "vue-area-linkage": "^5.1.0", "vue-cropper": "^0.5.4", "vue-i18n": "^8.7.0", "vue-loader": "^15.7.0", "vue-ls": "^3.2.0", - "vue-router": "^3.0.1", - "vuex": "^3.1.0", - "vue-print-nb-jeecg": "^1.0.10", - "clipboard": "^2.0.4", "vue-photo-preview": "^1.1.3", + "vue-print-nb-jeecg": "^1.0.10", + "vue-router": "^3.0.1", "vue-splitpane": "^1.0.4", "vuedraggable": "^2.20.0", - "codemirror": "^5.46.0", - "@tinymce/tinymce-vue": "2.1.0", - "tinymce": "5.4.1", - "@toast-ui/editor": "^2.1.2", - "vue-area-linkage": "^5.1.0", - "china-area-data": "^5.0.1", - "dom-align": "1.12.0", - "xe-utils": "2.4.8", + "vuex": "^3.1.0", "vxe-table": "2.9.13", "vxe-table-plugin-antd": "1.8.10", - "cron-parser": "^2.10.0", - "qiankun": "^2.5.1", + "xe-utils": "2.4.8", "xss": "^1.0.13", - - "@jiaminghi/data-view": "^2.10.0", - "area-data": "^5.0.6", - "dircountdown": "^1.1.0", - "echarts": "^5.3.0", - "element-ui": "^2.15.6", - "jquery": "^3.6.0", - "qs": "^6.10.3" + "html2canvas": "~1.0.0-rc.4", + "jspdf": "^2.5.1" }, "devDependencies": { "@babel/polyfill": "^7.2.5", @@ -62,13 +66,15 @@ "@vue/cli-service": "^3.3.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "7.2.3", + "compression-webpack-plugin": "^3.1.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.1.0", + "html-webpack-plugin": "^4.2.0", "less": "^3.9.0", "less-loader": "^4.1.0", "vue-template-compiler": "^2.6.10", - "html-webpack-plugin": "^4.2.0", - "compression-webpack-plugin": "^3.1.0" + "html2canvas": "~1.0.0-rc.4", + "jspdf": "^2.5.1" }, "eslintConfig": { "root": true, @@ -106,7 +112,10 @@ "vue/html-closing-bracket-newline": 0, "vue/no-parsing-error": 0, "no-tabs": 0, - "indent": ["off", 2], + "indent": [ + "off", + 2 + ], "no-console": 0, "space-before-function-paren": 0 } @@ -121,4 +130,4 @@ "last 2 versions", "not ie <= 10" ] -} \ No newline at end of file +} diff --git a/ant-design-vue-jeecg/src/mixins/htmlToPdf.js b/ant-design-vue-jeecg/src/mixins/htmlToPdf.js new file mode 100644 index 00000000..471b5cdd --- /dev/null +++ b/ant-design-vue-jeecg/src/mixins/htmlToPdf.js @@ -0,0 +1,90 @@ +import html2canvas from 'html2canvas'; +import JsPDF from 'jspdf'; + +/** + * @param ele 要生成 pdf 的DOM元素（容器） + * @param padfName PDF文件生成后的文件名字 + * */ + +function downloadPDF(ele, pdfName){ + + let eleW = ele.offsetWidth;// 获得该容器的宽 + let eleH = ele.offsetHeight;// 获得该容器的高 + + let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 + let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 + + var canvas = document.createElement("canvas"); + var abs = 0; + + let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条） + let 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; + + var 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画布内 可以跨域请求外部链接图片, 允许跨域请求。 + } ).then( (canvas)=>{ + + var contentWidth = canvas.width; + var contentHeight = canvas.height; + //一页pdf显示html页面生成的canvas高度; + var pageHeight = contentWidth / 592.28 * 841.89; + //未生成pdf的html页面高度 + var leftHeight = contentHeight; + //页面偏移 + var position = 0; + //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 + var imgWidth = 595.28; + var imgHeight = 595.28/contentWidth * contentHeight; + + var pageData = canvas.toDataURL('image/jpeg', 1.0); + + var pdf = new JsPDF('', '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); + }) + +} + +export default { + downloadPDF +} \ No newline at end of file diff --git a/ant-design-vue-jeecg/src/utils/htmlToPdf.js b/ant-design-vue-jeecg/src/utils/htmlToPdf.js new file mode 100644 index 00000000..3a8ca5f2 --- /dev/null +++ b/ant-design-vue-jeecg/src/utils/htmlToPdf.js @@ -0,0 +1,90 @@ +import html2canvas from 'html2canvas'; +import JsPDF from 'jspdf'; + +/** + * @param ele 要生成 pdf 的DOM元素（容器） + * @param padfName PDF文件生成后的文件名字 + * */ + +export function downloadPDF(ele, pdfName){ + + let eleW = ele.offsetWidth;// 获得该容器的宽 + let eleH = ele.offsetHeight;// 获得该容器的高 + + let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 + let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 + + var canvas = document.createElement("canvas"); + var abs = 0; + + let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条） + let 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; + + var 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画布内 可以跨域请求外部链接图片, 允许跨域请求。 + } ).then( (canvas)=>{ + + var contentWidth = canvas.width; + var contentHeight = canvas.height; + //一页pdf显示html页面生成的canvas高度; + var pageHeight = contentWidth / 592.28 * 841.89; + //未生成pdf的html页面高度 + var leftHeight = contentHeight; + //页面偏移 + var position = 0; + //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 + var imgWidth = 595.28; + var imgHeight = 595.28/contentWidth * contentHeight; + + var pageData = canvas.toDataURL('image/jpeg', 1.0); + + var pdf = new JsPDF('', '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); + }) + +} + +// export { +// downloadPDF +// } \ No newline at end of file diff --git a/ant-design-vue-jeecg/src/views/productplan/ProductplanManage.vue b/ant-design-vue-jeecg/src/views/productplan/ProductplanManage.vue index 25ae73e0..e92dcd14 100644 --- a/ant-design-vue-jeecg/src/views/productplan/ProductplanManage.vue +++ b/ant-design-vue-jeecg/src/views/productplan/ProductplanManage.vue @@ -51,11 +51,11 @@ 自动排位 生成物料单 - 查看物料单 + 查看物料单 发送到仓库 - 导出 + 返回