foster-pc-vue/src/views/authentic/Pdf.vue

<template>
  <el-dialog
      class="my-dialog"
      fullscreen
      append-to-body
      :model-value="showDialog"
      @close="closeDialog()"
  >
    <div class="pdf-main">
      <div class="title" >
        <div class="name" ></div>
        <div class="pdf-close cursor-pointer" @click="closeDialog"></div>
      </div>
      <div id="printTest" class="pdf-dialog-box">
        <div class="pdf-my-body"  >
        <div class="pdfBox" >
          <div class="a4" id="pdfDom">
            <div class="a4_title">确权单</div>
            <table class="a4_table" border=1 style="border-collapse: collapse;">
              <tr>
                <td class="name">农场地址</td>
                <td class="text">{{rowData.address}}</td>
                <td class="name">农场名称</td>
                <td class="text">{{rowData.farmName}}</td>
              </tr>
              <tr>
                <td class="name">创建时间</td>
                <td class="text">{{rowData.createDate}}</td>
                <td class="name">农场面积</td>
                <td class="text">{{rowData.area}}亩</td>
              </tr>
              <tr>
                <td class="name">作物物种</td>
                <td class="text">{{rowData.speciesTypeName}}</td>
                <td class="name">客户姓名</td>
                <td class="text">{{rowData.masterName}}</td>
              </tr>
              <tr>
                <td class="name">联系电话</td>
                <td class="text">{{rowData.masterTel}}</td>
              </tr>
              <tr>
                <td class="name">经纬度</td>
                <td colspan="3" class="text2">{{rowData.points}}</td>
              </tr>
            </table>
            <div class="a4_sub_title">地块四至图</div>
            <img :key="imgUrl" v-show="imgUrl" class="img-content img" style="z-index: 999" width="595" height="500" :src="imgUrl" />
            <div :key="imgUrl" v-show="!imgUrl" class="img-content" ref="mapRef" id="mapRefId"></div>
            <div class="signature">签名:______________</div>
          </div>
        </div>
      </div>
      </div>
      <div style="text-align: left">
         <el-button size="large" color="#626aef"  @click="html2Canvas1('test')">打印</el-button>
        <!-- <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button> -->
        <!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
      </div>

    </div>
  </el-dialog>
</template>

<script setup>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
import {useStore} from "vuex";
import {WKT} from "ol/format";
import PdfMap from "./pdfMap";
import { dateFormat } from "@/utils/date_util";
import {getAreaByWkt} from "../../utils/map";
const emit = defineEmits(["closeDialog","success"])
const state = useStore().state;
const sendConfirmShow = ref(false)
const mapRef = ref(null)
let pdfMap = new PdfMap()
let rowData = ref({})

async function send(){
  closeDialog();
}

const props = defineProps({
  title:{
    type:String,
    required:true
  },
  showDialog: {
    type: Boolean,
    default: true,
  },
  rowId:{
    type: Number,
    required:true,
  }
});

let printObj = {
  id:"printTest",
  popTitle: 'good print',
  beforeOpenCallback (vue) {
    toImg(true)
    console.log('打开之前')
  },
  openCallback (vue) {
    let {masterName, farmName, masterTel} = rowData.value
    document.title =`${farmName}-${masterTel}-${masterName}`
    console.log('执行了打印')
  },
  closeCallback (vue) {
    document.title =`飞鸟确权平台`
    console.log('关闭了打印工具')
  }
}

let imgUrl = ref(null)
const executor = ref([])
const executorList = ref([])

const formRef = ref(null);
const {title, rowId} = toRefs(props);
const closeDialog = (key) => {
  switch (key){
    case "sendConfirm":
      sendConfirmShow.value = false;
      return
  }
  emit("closeDialog", "pdf");
};
function toImg() {
  // let canvas = pdfMap.kmap.map.getViewport().querySelector('canvas')
  // let dataURL = canvas.toDataURL('image/webp');
  //   imgUrl.value = dataURL;
}
function html2Canvas1(){
html2Canvas(document.querySelector('#pdfDom'), {//获取文档中 id="pdfDom" 的元素,返回匹配指定选择器的第一个元素
        allowTaint: true  //允许跨源图像污染画布
      }).then(function (canvas) {
        let contentWidth = canvas.width   // 获得容器的宽
        let contentHeight = canvas.height // 获得容器的高
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight  //未生成pdf的html页面高度
        let position = 0   //页面偏移
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        //图片格式,(0-1,数字越大，代表导出的图片越清晰,默认值：0.92)
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        //第一个参数: l：横向  p：纵向
        //第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
        //格式，默认为“a4”,如果想用自己的格式例如[595.28, 841.89]
        let PDF = new JsPDF('', 'pt', 'a4')
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            //避免添加空白页
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        // 导出pdf文件命名
        // PDF.save(title + '.pdf')
        PDF.save('test.pdf')
      })
}



onMounted(()=>{
  VE_API.authentic.getDetails({id:rowId.value}).then(({data})=>{
    data.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
    data.area = getAreaByWkt(data.geom)
    rowData.value = data
    pdfMap.initMap(data,mapRef.value)
    setTimeout(function(){
      toImg(false)
    },1500)
  })
})
</script>

<style lang="scss" scoped>
$title-height:0px;
$body-height:calc(100% - $title-height);

.pdf-main{
  left: 25%;
  right: 25%;
  top:10%;
  bottom:10%;
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #00FFF0;
  border-radius: 4px;
  border: 2px solid rgba(81,233,240,0.6);
  position: absolute;
  .title{
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: rgba(0,77,101,0.8);
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid rgba(81,233,240,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
      margin-left: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #00FFF0;
      height: 22px;
    }
    .pdf-close{
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
}
.pdf-dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  width: 100%;
  height: 100%;
  .pdf-my-body{
    width: 100%;
    height: $body-height;
    box-sizing: border-box;
    padding: 20px;
    ::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      background: rgb(70, 71, 71);;
      border-radius: 6px;
    }
    ::-webkit-scrollbar-track {
      /* 滚动条里面轨道 */
      background: #ededed;
    }
  }

  .pdfBox{
    height: calc(100%);
    width: 100%;
    overflow-y: scroll;
    background-color: rgba(141, 142, 142);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  .a4{
    font-family: PingFangSC-Medium, PingFang SC;
    background-color: #FFFFFF;
    width:595px;
    height:1000px;
    margin: 5px 0px 5px 0px;
    padding: 19px 63px 19px 63px;
    font-weight: 600;
    color: #000000;
    .a4_title{
      width:595px;
      height: 33px;
      font-size: 24px;
      text-align: center;
      margin: 10px 0px 10px 0px;
    }
    .a4_sub_title{
      font-size: 16px;
      margin: 10px 0px 10px 0px;
    }
    .a4_table{
      height: calc(842px - 33px - 26px - 600px);
      max-height: calc(842px - 33px - 26px - 600px);
      width:595px;
      font-size: 12px;
      .name{
        width: 50px;
        height: 20px;
        line-height: 20px;
        padding-right: 9px;
        box-sizing: border-box;
        text-align: right;
      }
      .text{
        width: 122px;
        height: 20px;
        line-height: 20px;
        text-align: left;
        padding-left: 9px;
        box-sizing: border-box;
      }
      .text2{
        text-align: left;
        font-size: 10px;
        font-weight: normal;
      }
    }
    .img-content{
      width:595px;
      height: 500px;
      z-index: 1000;
      .ol-viewport{
        width:595px !important;
        height: 500px !important;
        .ol-layers{
          width:595px !important;
          height: 500px !important;
          .ol-layer{
            width:595px !important;
            height: 500px !important;
          }
        }
      }
    }
    .img{
      z-index: 999;
    }
    .signature{
      width:595px;
      height: 20px;
      z-index: 1000;
      margin-top: 40px;
      text-align: right;
    }
  }


}
canvas{
  width:595px;
  height: 500px;
}

</style>