add pdf预览功能demo

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

@@ -15,13 +15,15 @@
 import pdf from "vue-pdf";
 import jquery from "jquery";
 import html2canvas from "html2canvas";
+import axios from "axios";
+import request from "@/common/util";
 export default {
   components: {
-    pdf
+    pdf,
   },
   data() {
     return {
-      url: ""
+      url: "",
     };
   },
   created() {
@@ -30,7 +32,7 @@ export default {
   },
   mounted() {
     // 截图
-    html2canvas(this.$refs.content).then(canvas => {
+    html2canvas(this.$refs.content).then((canvas) => {
       canvas.id = "mycanvas";
       const base64 = canvas.toDataURL("image/png");
       jquery("a").prop("href", base64);
@@ -39,12 +41,74 @@ export default {
   methods: {
     onInit() {
       this.onLoadData();
+      request({
+        url: "http://localhost:5566/agreement/info",
+        method: "post",
+        data: {
+          ticket: "8a1188557bda7894017bed584f803119-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" })
+        );
+        // if (pdfUrl) {
+        //   this.handlePrint(pdfUrl);
+        // }
+      });
+      // axios({
+      //   method: "post",
+      //   url: "http://10.19.94.9:7099/api/agreement/info",
+      //   responseType: "blob",
+      //   data: {
+      //     ticket: "8a1188557bda7894017bed584f803119-ticket",
+      //     id: "C655515B-FD91-48F2-BD79-EAABAFB7077C",
+      //   },
+      // }).then((res) => {
+      //   debugger;
+      //   console.log(res);
+      //   if (!res) {
+      //     return;
+      //   }
+      //   let blob = new Blob([res.data], {
+      //     type: "application/octet-stream",
+      //   });
+      //   let url = window.URL.createObjectURL(blob);
+      //   let link = document.createElement("a");
+      //   link.style.display = "none";
+      //   link.href = url;
+      //   document.body.appendChild(link);
+      //   link.click();
+      // });
+    },
+    handlePrint(pdf) {
+      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", pdf);
+        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;
-    }
-  }
+      // console.log(this.$route.params);
+      // this.url = this.$route.params.url;
+    },
+  },
 };
 </script>
 <style lang="less" scoped>