Merge branch 'master' of http://118.178.224.202:3000/ewide/zsxt_nbzs_h5

FrontCode2/sunshine_levy/src/views/pdf/pdf.vue

@@ -1,102 +1,63 @@
 <template>
-  <div>
-    <div ref="content" class="content">
-      <pdf :src="url" class="PDF"></pdf>
+  <div style="margin: 0 auto">
+    <el-button
+      type="primary"
+      @click="testdownload4()"
+      style="display: block; margin: 0 auto"
+      :loading="isloading"
+      >下载到手机</el-button
+    >
+    <div v-for="(item, index) in apidata.pics" :key="index">
+      <van-image
+        :width="pic_width"
+        :height="pic_height"
+        :src="item"
+        class="baseImg"
+      />
     </div>
-    <div class="bottom">
-      <a href="" download="">
-        <el-button type="primary">保存到相册</el-button>
-      </a>
-    </div>
-    <iframe :src="url" frameborder="0"></iframe>
-    <!-- <el-button type="primary" @click="this.savePdf()">测试2</el-button>
-    <el-button type="primary" @click="this.handlePrint()">测试3</el-button>
-    <el-button type="primary" @click="testdownload4()">测试4</el-button> -->
   </div>
 </template>
  
-<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
-import pdf from "vue-pdf";
-import $ from "jquery";
-import html2canvas from "html2canvas";
-// import axios from "axios";
-import request from "@/common/util";
+// import pdf from "vue-pdf";
 import { mgop } from "@aligov/jssdk-mgop";
 export default {
-  components: {
-    pdf
-  },
+  components: {},
   data() {
     return {
-      url:
-        "https://zsxt.nbzs.org.cn/Files/UploadFiles/e85a13ef-431c-46a5-85cd-9dd1b4f50fc6/80616f98-da17-49bc-92d0-b87199963787.pdf"
+      url: "",
+      apidata: {},
+      pic_width: "auto",
+      pic_height: "auto",
+      isloading: true,
     };
   },
   created() {
     this.onInit();
   },
-  mounted() {
-    // 截图
-    // html2canvas(this.$refs.PDF).then(canvas => {
-    //   canvas.id = "mycanvas";
-    //   const base64 = canvas.toDataURL("image/png");
-    //   jquery("a").prop("href", base64);
-    // });
-  },
+  mounted() {},
   methods: {
     onInit() {
-      // this.onLoadData();
-      request({
-        url: "http://10.19.94.9:7099/api/agreement/info",
-        method: "post",
-        data: {
-          ticket: window.sessionStorage.getItem("ticket"),
-          id: "C655515B-FD91-48F2-BD79-EAABAFB7077C"
-        },
-        headers: { "Content-Type": "application/json; charset=UTF-8" },
-        responseType: "blob" //一定要设置响应类型，否则页面会是空白pdf
-      }).then(result => {
-        console.log("结果", result);
-        const binaryData = [];
-        binaryData.push(result.data);
-        //获取blob链接
-        const gan = window.URL.createObjectURL(
-          new Blob(binaryData, { type: "application/pdf" })
-        );
-        this.url = this.getObjectURL(result.data);
-        console.log("aaa", this.url);
-        $("a").prop("href", this.url);
-        // if (pdfUrl) {
-        //   this.handlePrint(pdfUrl);
-        // }
-      });
       mgop({
-        api: "mgop.kykj.houseexpropriat.getagreementinfo",
+        api: "mgop.kykj.houseexpropriat.getagreementinfop",
         host: "https://mapi.zjzwfw.gov.cn/",
         dataType: "JSON",
         type: "POST",
         data: {
-          ticket: window.sessionStorage.getItem("ticket"),
-          id: "C655515B-FD91-48F2-BD79-EAABAFB7077C"
+          ticket:
+            this.$route.params.ticket ||
+            window.sessionStorage.getItem("ticket"),
+          id: "C655515B-FD91-48F2-BD79-EAABAFB7077C",
         },
         appKey: "es4b8zmz+2001833218+dehllx",
         onSuccess: result => {
           console.log("pdf.vue页面请求pdf文件:", result);
           if (result.data && result.data.success == true) {
             console.log("result.data.data:", result.data.data);
-            // this.url = result.data.data;
-            const binaryData = [];
-            binaryData.push(result.data.data);
-            //获取blob链接
-            const gan = window.URL.createObjectURL(
-              new Blob(binaryData, { type: "application/pdf" })
-            );
-            this.url = this.getObjectURL(gan);
-            console.log("aaa", this.url);
-            // if (pdfUrl) {
-            //   this.handlePrint(pdfUrl);
-            // }
+            this.apidata = result.data.data;
+            this.pic_width = "94%";
+            this.pic_height = "100%";
+            this.isloading = false;
           }
         },
         onFail: err => {
@@ -104,34 +65,11 @@ export default {
         }
       });
     },
-
-    handlePrint() {
-      if (document.getElementById("print-iframe")) {
-        document.body.removeChild(document.getElementById("print-iframe"));
-      }
-      //判断iframe是否存在，不存在则创建iframe
-      let iframe = document.getElementById("print-iframe");
-      if (!iframe) {
-        iframe = document.createElement("IFRAME");
-        let doc = null;
-        iframe.setAttribute("src", this.url);
-        iframe.setAttribute("id", "print-iframe");
-        document.body.appendChild(iframe);
-        doc = iframe.contentWindow.document;
-        doc.close();
-        iframe.contentWindow.focus();
-      }
-      iframe.contentWindow.print();
-    },
-    onLoadData() {
-      // console.log(this.$route.params);
-      // this.url = this.$route.params.url;
-    },
-    savePdf() {
+    saveImages() {
       ZWJSBridge.onReady(() => {
-        console.log("初始化完成后，执行bridge方法-savePdf");
+        console.log("初始化完成后，执行bridge方法-saveImages");
         ZWJSBridge.saveImage({
-          url: this.url
+          url: this.apidata.pdf,
         })
           .then(result => {
             console.log("saveImage()成功:" + JSON.stringify(result));
@@ -146,10 +84,10 @@ export default {
       ZWJSBridge.onReady(() => {
         console.log("初始化完成后，执行bridge方法-testdownload4");
         ZWJSBridge.openLink({
-          url: this.url
+          url: this.apidata.pdf,
         })
-          .then(result => {
-            console.log("testdownload4():" + result);
+          .then((result) => {
+            console.log("测试新开窗口():" + result);
           })
           .catch(error => {
             console.log(error);
@@ -171,4 +109,8 @@ export default {
   text-align: center;
   margin-bottom: 20px;
 }
+.baseImg {
+  display: block;
+  margin: 0 auto;
+}
 </style>