pageToPDF

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",
+    "xlsx": "^0.17.1"
-    "html-docx-js": "^0.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

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
+}

hb_client/src/views/qm/admissiontest.vue

@@ -56,7 +56,7 @@
             <el-table-column label="创建时间">
               <template slot-scope="scope">{{scope.row.create_time}}</template>
             </el-table-column>
-            <el-table-column
+           <!-- <el-table-column
               align="center"
               label="操作"
             >
@@ -68,7 +68,7 @@
                   复验记录
                 </el-link>
               </template>
-            </el-table-column>
+            </el-table-column>-->
           </el-table>
           <pagination
             v-show="fifodetailList1.count > 0"
@@ -163,7 +163,7 @@
             <el-table-column label="创建时间">
               <template slot-scope="scope">{{ scope.row.create_time }}</template>
             </el-table-column>
-            <el-table-column
+            <!--<el-table-column
               align="center"
               label="操作"
             >
@@ -184,7 +184,7 @@
                   复验记录
                 </el-link>
               </template>
-            </el-table-column>
+            </el-table-column>-->
           </el-table>
           <pagination
             v-show="fifodetailList3.count > 0"
@@ -234,7 +234,7 @@
             <el-table-column label="创建时间">
               <template slot-scope="scope">{{ scope.row.create_time }}</template>
             </el-table-column>
-            <el-table-column
+            <!--<el-table-column
               align="center"
               label="操作"
             >
@@ -255,7 +255,7 @@
                   复验记录
                 </el-link>
               </template>
-            </el-table-column>
+            </el-table-column>-->
           </el-table>
           <pagination
             v-show="fifodetailList4.count > 0"
@@ -272,7 +272,7 @@
 <script>
   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 {

hb_client/src/views/wpm/need.vue

@@ -713,12 +713,47 @@
     </el-dialog>
     <!--已完成检查表查看-->
     <el-dialog
-      :title="formName"
       :visible.sync="recordFinishedVisible"
       :close-on-click-modal="false"
       id="showForm"
     >
-      <el-row>
+      <div id="pdfDom" class="report" ref="report" style="padding: 30px;">
+        <div style="height: 40px;line-height:40px;text-align: center;font-size: 20px;font-weight: bold">{{formName}}
+        </div>
+        <div style="overflow: hidden;border-top: 1px solid #000000;border-left: 1px solid #000000;
+            border-right: 1px solid #000000;box-sizing: border-box">
+          <div
+            style="height: 40px;line-height: 40px;padding-left: 20px;width: 50%;float: left;border-right: 1px solid #000000;border-bottom: 1px solid #000000;">
+          <span
+            style="width: 150px;display: inline-block;font-size: 14px;color: #606266;font-weight: 600;border-right: 1px solid #000000;">操作人：</span>
+            <span>{{create_by_}}</span>
+          </div>
+          <div
+            style="height: 40px;line-height: 40px;padding-left: 20px;width: 50%;float: left;border-right: 1px solid #000000;border-bottom: 1px solid #000000;">
+          <span
+            style="width: 150px;display: inline-block;font-size: 14px;color: #606266;font-weight: 600;border-right: 1px solid #000000;">操作时间：</span>
+            <span>{{update_time}}</span>
+          </div>
+          <div v-for="item in fieldList" :key="item.id" style="width: 50%;display: inline-block;float: left;">
+            <div
+              v-if="item.field_type!=='draw'&&item.field_value!==null&&item.field_value!==''"
+              style="height: 40px;line-height: 40px;padding-left: 20px;border-right: 1px solid #000000;border-bottom: 1px solid #000000;"
+            >
+            <span
+              style="width: 150px;display: inline-block;font-size: 14px;color: #606266;font-weight: 600;border-right: 1px solid #000000;">{{item.field_name}}：</span>
+              <span>{{item.field_value}}</span>
+            </div>
+          </div>
+          <div v-for="item in fieldList" :key="item.id" style="width: 100%;display: inline-block;float: left;">
+            <div v-if="item.field_type==='draw'"
+                 style="height: 400px;border-bottom: 1px solid #000000;border-right: 1px solid #000000;">
+              <span style="font-size: 14px;color: #606266;font-weight: 600;">{{item.field_name}}：</span>
+              <img style="width: 45%;vertical-align: text-top;" :src="'http://49.232.14.174:2222'+item.field_value"/>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--<el-row id="pdfDom">
         <el-col :span="12">
           <div class="items">
             <span class="itemLabel">操作人：</span>
@@ -743,8 +778,8 @@
             <img style="width: 45%;vertical-align: text-top;" :src="'http://49.232.14.174:2222'+item.field_value"/>
           </div>
         </el-col>
+      </el-row>-->
       <el-button @click="exportDom">导出</el-button>
-      </el-row>
     </el-dialog>
     <!--刷脸验证-->
     <el-dialog :visible.sync="limitedPhoto" @close="closeCamera" id="loginFaceWrap">
@@ -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 {saveAs} from "file-saver";
-  import htmlDocx from "html-docx-js/dist/html-docx";
+  // 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:{
+        params: {
-          id:null,
+          id: null,
-          is_testok:true,
+          is_testok: true,
-          record_data:null
+          record_data: null
         },
         activeName: "1",
         create_by_: '',
@@ -939,12 +975,13 @@
     },
     methods: {
       exportDom() {
-        let dom = document.querySelector("#showForm .el-dialog");
+        htmlToPdf.downloadPDF(document.getElementById('pdfDom'), this.formName);
+        /* let dom = document.querySelector("#showForm .el-dialog");
          let str = dom.innerHTML;
          debugger;
          console.log(str);
          let htmlStr = `<!DOCTYPE html><html lang="en"><body> ${str}</body></html>`;
-        saveAs(htmlDocx.asBlob(htmlStr, {orientation: "landscape"}), "报告.doc");
+         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;