<template>
  <div>
    <div ref="content" class="content">
      <!-- <pdf :src="url" class="PDF"></pdf> -->
    </div>
    <div class="bottom">
      <a href="" download="">
        <el-button type="primary">保存到相册</el-button>
      </a>
    </div>
    <iframe
      src="https://zsxt.nbzs.org.cn/Files/UploadFiles/e85a13ef-431c-46a5-85cd-9dd1b4f50fc6/80616f98-da17-49bc-92d0-b87199963787.pdf"
      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 id="nav">222</div> -->
  </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 { mgop } from "@aligov/jssdk-mgop";
export default {
  components: {
    pdf
  },
  data() {
    return {
      url: ""
    };
  },
  created() {
    this.onInit();
  },
  mounted() {
    // 截图
    // html2canvas(this.$refs.PDF).then(canvas => {
    //   canvas.id = "mycanvas";
    //   const base64 = canvas.toDataURL("image/png");
    //   jquery("a").prop("href", base64);
    // });
  },
  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 => {
        console.log("请求成功了", 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);
        // }
      });
    },
    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();
    },
    savePdf() {
      ZWJSBridge.onReady(() => {
        console.log("初始化完成后，执行bridge方法-savePdf");
        ZWJSBridge.saveImage({
          url: this.url
        })
          .then(result => {
            console.log("saveImage()成功:" + JSON.stringify(result));
          })
          .catch(error => {
            console.log("saveImage()失败:" + JSON.stringify(result));
            console.log(error);
          });
      });
    },
    testdownload4() {
      ZWJSBridge.onReady(() => {
        console.log("初始化完成后，执行bridge方法-testdownload4");
        ZWJSBridge.openLink({
          url: this.url
        })
          .then(result => {
            console.log("testdownload4():" + result);
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  text-align: center;
  line-height: 200px;
  font-size: 30px;
  margin-bottom: 20px;
}
.bottom {
  text-align: center;
  margin-bottom: 20px;
}
</style>
