<template>
  <div>
    <pdf :src="url"></pdf>
    <div ref="content" class="content">被保存的内容</div>
    <div class="bottom">
      <a href="" download="">
        <el-button type="primary">保存到相册</el-button>
      </a>
    </div>
  </div>
</template>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
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,
  },
  data() {
    return {
      url: "",
    };
  },
  created() {
    this.onInit();
    console.log("pdf");
  },
  mounted() {
    // 截图
    html2canvas(this.$refs.content).then((canvas) => {
      canvas.id = "mycanvas";
      const base64 = canvas.toDataURL("image/png");
      jquery("a").prop("href", base64);
    });
  },
  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;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  text-align: center;
  height: 200px;
  line-height: 200px;
  font-size: 30px;
}
.bottom {
  text-align: center;
  margin-bottom: 20px;
}
</style>
