diff --git a/hb_client/package.json b/hb_client/package.json index 6df0f70..a6eb736 100644 --- a/hb_client/package.json +++ b/hb_client/package.json @@ -28,7 +28,10 @@ "element-ui": "^2.15.5", "file-saver": "^2.0.2", "fuse.js": "^6.4.6", + "html-docx-js": "^0.3.1", + "html2canvas": "^1.4.1", "js-cookie": "^3.0.0", + "jspdf": "^2.5.1", "mammoth": "^1.4.19", "normalize.css": "^8.0.1", "nprogress": "0.2.0", @@ -40,8 +43,7 @@ "vue-router": "^3.5.2", "vuex": "^3.6.2", "webpack-dev-server": "^4.7.3", - "xlsx": "^0.17.1", - "html-docx-js": "^0.3.1" + "xlsx": "^0.17.1" }, "devDependencies": { "@babel/core": "^7.15.0", diff --git a/hb_client/src/utils/htmlToPdf.js b/hb_client/src/utils/htmlToPdf.js new file mode 100644 index 0000000..11b33ce --- /dev/null +++ b/hb_client/src/utils/htmlToPdf.js @@ -0,0 +1,98 @@ +// 导出页面为PDF格式 +import html2canvas from 'html2canvas' +import JsPDF from 'jspdf' +/*export default{ + install (Vue, options) { + Vue.prototype.getPdf = function () { + var title = this.htmlTitle; + html2Canvas(document.querySelector('#pdfDom'), { + allowTaint: true + }).then(function (canvas) { + let contentWidth = canvas.width; + let contentHeight = canvas.height; + let pageHeight = contentWidth / 592.28 * 841.89; + let leftHeight = contentHeight; + let position = 0; + let imgWidth = 595.28; + let imgHeight = 592.28 / contentWidth * contentHeight; + let pageData = canvas.toDataURL('image/jpeg', 1.0); + let PDF = new JsPDF('', 'pt', 'a4'); + if (leftHeight < pageHeight) { + PDF.addImage(pageData, 'JPEG', 0, 0, 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(title + '.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_out - win_in)/2; // 获得滚动条宽度的一半 + } + 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( 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 +} diff --git a/hb_client/src/views/qm/admissiontest.vue b/hb_client/src/views/qm/admissiontest.vue index 9abc553..86bc47a 100644 --- a/hb_client/src/views/qm/admissiontest.vue +++ b/hb_client/src/views/qm/admissiontest.vue @@ -56,7 +56,7 @@ - @@ -68,7 +68,7 @@ 复验记录 - + --> - @@ -184,7 +184,7 @@ 复验记录 - + --> - @@ -255,7 +255,7 @@ 复验记录 - + --> import {getfifodetailList} from "@/api/inm"; import checkPermission from "@/utils/permission"; - import {createTestrecord} from "@/api/inm"; + // import {createTestrecord} from "@/api/inm"; import Pagination from "@/components/Pagination"; // secondary package based on el-pagination export default { diff --git a/hb_client/src/views/wpm/need.vue b/hb_client/src/views/wpm/need.vue index 407bbca..1a29bcf 100644 --- a/hb_client/src/views/wpm/need.vue +++ b/hb_client/src/views/wpm/need.vue @@ -713,12 +713,47 @@ - +
+
{{formName}} +
+
+
+ 操作人： + {{create_by_}} +
+
+ 操作时间： + {{update_time}} +
+
+
+ {{item.field_name}}： + {{item.field_value}} +
+
+
+
+ {{item.field_name}}： + +
+
+
+
+ + 导出 @@ -767,14 +802,15 @@ import {getrecordformList, getrffieldList} from "@/api/mtm"; import {getwproductList, wproductPutin, createputins, testInit, scrap, getRetrial} from "@/api/wpm"; import {getTestRecord, getTestRecordItem, putTestRecordItem, delTestRecordItem, subTestRecordItem} from "@/api/qm"; - // import {genTree} from "@/utils"; import Pagination from "@/components/Pagination"; // secondary package based on el-pagination - import {saveAs} from "file-saver"; - import htmlDocx from "html-docx-js/dist/html-docx"; + // import {saveAs} from "file-saver"; + // import htmlDocx from "html-docx-js/dist/html-docx"; + import htmlToPdf from './../../utils/htmlToPdf'; + const defaultetestitem = {}; export default { inject: ['reload'], - components: {Pagination, customForm, reviewForm,faceLogin}, + components: {Pagination, customForm, reviewForm, faceLogin}, data() { return { testitem: defaultetestitem, @@ -815,10 +851,10 @@ page: 1, page_size: 20, }, - params:{ - id:null, - is_testok:true, - record_data:null + params: { + id: null, + is_testok: true, + record_data: null }, activeName: "1", create_by_: '', @@ -939,12 +975,13 @@ }, methods: { exportDom() { - let dom = document.querySelector("#showForm .el-dialog"); - let str = dom.innerHTML; - debugger; - console.log(str); - let htmlStr = ` ${str}`; - saveAs(htmlDocx.asBlob(htmlStr, {orientation: "landscape"}), "报告.doc"); + htmlToPdf.downloadPDF(document.getElementById('pdfDom'), this.formName); + /* let dom = document.querySelector("#showForm .el-dialog"); + let str = dom.innerHTML; + debugger; + console.log(str); + let htmlStr = ` ${str}`; + saveAs(htmlDocx.asBlob(htmlStr, {orientation: "landscape"}), "报告.doc");*/ }, checkPermission, @@ -963,6 +1000,7 @@ this.getList3(); } }, + //待检半成品列表 getList() { this.listLoading = true; @@ -1528,15 +1566,15 @@ this.$message.error(err); });*/ }, - checkSubmit(data){ + checkSubmit(data) { debugger; - let that =this; + let that = this; let id = that.params.id; let params = new Object(); params.is_testok = that.params.is_testok; params.record_data = that.params.record_data; params.token = data.token; - if(data.token!==''&&data.token!==null&&data.token!==undefined) { + if (data.token !== '' && data.token !== null && data.token !== undefined) { putTestRecordItem(id, params).then((res) => { if (res.code >= 200) { subTestRecordItem(id, params).then((res) => { @@ -1551,10 +1589,10 @@ that.getList1(); that.getList3(); that.refreshRecord(); - }else{ + } else { that.$message.error(res.msg) } - }).catch(()=>{ + }).catch(() => { that.limitedPhoto = false; }); } else { @@ -1577,7 +1615,7 @@ }, /*关闭相机*/ - closeCamera () { + closeCamera() { this.$refs.faceTracking.closeCamera(); let video = document.getElementById('video'); let stream = video.srcObject;