pdf预览和下载功能

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

@@ -1,79 +1,52 @@
 <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>
-    <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: "",
+      apidata: {},
+      pic_width: "auto",
+      pic_height: "auto",
+      isloading: true,
     };
   },
   created() {
     this.onInit();
-    console.log("pdf");
-  },
-  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: "arraybuffer", //一定要设置响应类型，否则页面会是空白pdf
-      }).then((result) => {
-        const binaryData = [];
-        binaryData.push(result.data);
-        //获取blob链接
-        this.url = window.URL.createObjectURL(
-          new Blob(binaryData, { type: "application/pdf" })
-        );
-        $("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: "8a1189377bdad67c017bf66039d76376-ticket",
+          ticket:
+            this.$route.params.ticket ||
+            window.sessionStorage.getItem("ticket"),
           id: "C655515B-FD91-48F2-BD79-EAABAFB7077C",
         },
         appKey: "es4b8zmz+2001833218+dehllx",
@@ -81,16 +54,10 @@ export default {
           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);
-            // //获取blob链接
-            // this.url = window.URL.createObjectURL(
-            //   new Blob(binaryData, { type: "application/pdf" })
-            // );
-            // if (pdfUrl) {
-            //   this.handlePrint(pdfUrl);
-            // }
+            this.apidata = result.data.data;
+            this.pic_width = "94%";
+            this.pic_height = "100%";
+            this.isloading = false;
           }
         },
         onFail: (err) => {
@@ -98,33 +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));
@@ -139,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);
+            console.log("测试新开窗口():" + result);
           })
           .catch((error) => {
             console.log(error);
@@ -163,4 +108,8 @@ export default {
   text-align: center;
   margin-bottom: 20px;
 }
+.baseImg {
+  display: block;
+  margin: 0 auto;
+}
 </style>