新增pdf

package.json

@@ -29,6 +29,7 @@
     "element-ui": "^2.15.6",
     "file-saver": "^2.0.5",
     "html-docx-js": "^0.3.1",
+    "html2canvas": "^1.4.1",
     "jszip-utils": "^0.1.0",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",

src/views/sbcgsq/cgxmk/api.js

@@ -34,6 +34,13 @@ export const cgxmk_detail = (data = {}) => {
         data,
     })
 }
+// 采购项目库图片转pdf
+export const cgxmk_pdf= (data = {}) => {
+    return request({
+      url: "/jdbg/sbcg_cgxm/export_pdf",
+      data,
+    });
+}
 
 // 采购项目库删除
 export const cgxmk_del = (data = {}) => {

src/views/sbcgsq/cgxmk/index.vue

@@ -204,7 +204,8 @@
     </el-dialog>
     <!-- 详情弹窗 -->
     <el-dialog title="详情" :visible.sync="detailVisible" width="680px">
-      <p class="title">
+      <div id="imageWrapper">
+        <p class="title">
         申报日期: {{ detailMsg.create_dateline }} 审核通过日期:{{
          finishTime
         }}
@@ -261,13 +262,18 @@
         </div>
         {{ detailMsg.xm_is_wc_option_k === "2" ? "未完成" : "已完成" }}
       </div>
+      </div>
+      <div class="button">
+        <el-button type="success" size="small" @click="toImage">导出PDF</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { useUserStore } from "@/stores/user";
-
+import html2canvas from 'html2canvas'
+import { request } from "@/utils/request";
 const { real_name, dept_ids } = useUserStore();
 import Tinymce from "@/components/Tinymce/index.vue";
 import FileUpload from "@/components/FileUpload/index.vue";
@@ -278,6 +284,7 @@ import {
   cgxmk_edit,
   cgxmk_del,
   cgxmk_detail,
+  cgxmk_pdf
 } from "./api";
 
 export default {
@@ -319,7 +326,10 @@ export default {
       userList: [],
       detailMsg: {},
       shjd: [],
-      finishTime:'',
+      finishTime: '',
+      imgUrl: '',
+      imgSrc: "",
+      https: window.globalVariables.api,
     };
   },
   methods: {
@@ -464,6 +474,47 @@ export default {
         }
       });
     },
+    base64toFile(data, fileName) { 
+      let dataArr = data.split(",");
+      const byteString = atob(dataArr[1]);
+      const options = {
+        type: "image/jpeg",
+        endings: "native"
+      };
+      const u8Arr = new Uint8Array(byteString.length);
+      for (let i = 0; i < byteString.length; i++) {
+         u8Arr[i] = byteString.charCodeAt(i);
+      }
+      return new File([u8Arr], fileName + ".jpg", options);
+    },
+    toImage() {
+      html2canvas(document.querySelector("#imageWrapper"),{
+        allowTaint: true,useCORS:true,width:680,height:800,
+        }).then(canvas => {
+          //document.body.appendChild(canvas);
+          //console.info(canvas.toDataURL('image/png'));
+          // var img = document.getElementById("test");
+          // img.src = canvas.toDataURL('image/png');
+          var a = canvas.toDataURL('image/jpeg');
+          this.imgSrc=a
+          let str = this.base64toFile(a, 'file')
+          console.log(str);
+          let formData = new FormData();
+          formData.append("file", str);
+          let that = this;
+
+          request({
+            url: "/jdbg/sbcg_cgxm/export_pdf",
+            data: formData,
+            timeout: 1000 * 60,
+          })
+            .then(res => {
+            if (res.code == '1') {
+              window.open(res.data.file_url, "_blank");
+            }
+          })
+      });
+    }
   },
   mounted() {
     // this.add();