pageToPDF

2022-04-07 16:26:41 +08:00 · 2022-04-07 16:26:41 +08:00 · 72c97071fe
parent 0e9624281f
commit 72c97071fe
4 changed files with 171 additions and 33 deletions
--- 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",
--- a/hb_client/src/utils/htmlToPdf.js
+++ 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
+}
--- a/hb_client/src/views/qm/admissiontest.vue
+++ b/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 {
--- a/hb_client/src/views/wpm/need.vue
+++ b/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-button @click="exportDom">导出</el-button>
-      </el-row>
+      </el-row>-->
+      <el-button @click="exportDom">导出</el-button>
    </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 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 = `<!DOCTYPE html><html lang="en"><body> ${str}</body></html>`;
-        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 = `<!DOCTYPE html><html lang="en"><body> ${str}</body></html>`;
+         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;