eta_report_front/src/views/report/reportDetailPdf.vue

<!-- 原项目丢了 省事直接cv一下老项目代码 -->
<template>
  <div class="wrapper" ref="wrapper">
    <div id="reportdtl" v-if="isshow">
      <header>
        <p>
          <span style="margin-left: -0.45rem"
            >{{
              reportInfo.Title
            }}</span
          >
          <span v-if="reportInfo.CreateTime"
            >({{ reportInfo.CreateTime.substring(5, 7)
            }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
          >
        </p>

        <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
      </header>
      <div
        style="
          padding: 0rem 0.8rem 0.4rem;
          box-sizing: border-box;
          color: #666;
          font-size: 0.66rem;
          overflow: hidden;
        "
      >
        <span>{{ reportInfo.Author }}</span>
        <span style="float: right">{{ reportInfo.PublishTime||reportInfo.PrePublishTime }}</span>
      </div>


      <div id="abstract" v-if="reportInfo.Abstract">
        <div class="abstract_cont">
          <div>摘要：{{ reportInfo.Abstract }}</div>
        </div>
      </div>
      <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
        <!-- 晨报周报 -->
        <div class="chapter-wrap" v-if="reportInfo.HasChapter===1">
          <div class="chapter-item" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
            <div style="margin-bottom:10px">
              <span class="type" v-if="item.TypeName">{{item.TypeName}}</span>
              <span class="title">{{item.Title}}</span>
            </div>
            <div id="resetcss" style="overflow:hidden;" v-html="setReportContent(item.Content)"></div>
          </div>
        </div>
        <div id="resetcss" style="overflow:hidden;" v-else>
          <div v-html="reportInfo.Content"></div>
        </div>

        <div class="disclaimer" v-if="configInfo.Disclaimer">
          <h3>免责声明:</h3>
          <div v-html="configInfo.Disclaimer"></div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import {
  reportDetail,
} from "@/api/api.js";
import { BlindWatermark } from 'watermark-js-plus'
import { Base64 } from 'js-base64';
export default {
  data() {
    return {
      id: this.$route.query.code || '',
      isshow: false,
      reportInfo: {},

      configInfo: {}
    };
  },

  updated() {
    // $('#resetcss').css({font:"0.76rem/1.5 '微软雅黑'",color:"#333",letterSpacing:"0.05rem"});
    $("#resetcss")
      .find("img")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
    $("#resetcss")
      .find("video")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
    $("#resetcss")
      .find("p")
      .css({
        margin: "0 auto 0",
        font: "0.7rem/1.5 'PingFang-SC-Regular'",
        color: "#333",
        letterSpacing: "0.08rem",
        lineHeight: "1.3rem",
        wordBreak: 'break-all'
      });
    $("#resetcss")
      .find("span.fr-emoticon")
      .css({
        width: "20px",
        height: "20px",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        display: "inline-block",
        verticalAlign: "middle",
      });
    $("#resetcss").find("ol").css({ listStyleType: "disc" });
    $("#resetcss")
      .find("pre")
      .css({ display: "block", whiteSpace: "pre-wrap" });
  },
  mounted() {
    this.getreportdetail();
  },
  methods: {
    async getreportdetail() {
      const { Data,Ret  } = await reportDetail({ ReportCode: this.id,IsReplace:1 });
        if (Ret !== 200) return
        this.reportInfo = Data.Report;
        this.configInfo = {
          ...Data,
          Report:null
        };

        this.reportInfo.Content=this.setReportContent(this.reportInfo.Content)
        this.isshow = true;
        //水印
        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
        let waterMarkStr=Base64.decode(temwaterMarkStr)
        waterMarkStr=decodeURIComponent(waterMarkStr)
        this.$nextTick(()=>{
          if(Data.WatermarkReport==='true'){
            this.setWaterMark(waterMarkStr)
          }
          this.setBlindWaterMark(waterMarkStr)
        })
    },
    setReportContent(str){
      let ps = str.split('</iframe>')
      let returnStr=''
      for (let i = 0; i < ps.length; i++) {
        const itp = ps[i];
        if(itp.indexOf('chartshow')!=-1){
          returnStr+=itp.replace('<iframe','<eta-chart class="no-wrap"')+'</eta-chart>'
        }else if(itp.indexOf('sheetshow')!=-1){
          returnStr+=itp.replace('<iframe','<eta-table class="no-wrap"')+'</eta-table>'
        }else{
          returnStr+=itp
        }
      }
      return returnStr
    },
    setWaterMark(str){
      const text=str||''
      const target=document.getElementById('resetcss')
      const canvas = document.createElement("canvas");

      const ctx = canvas.getContext("2d");
      ctx.font = "18px Arial";
      ctx.rotate((-45 * Math.PI) / 200);
      ctx.fillStyle='#f1f1f1'
      ctx.fillText(text, 30, 200);
      ctx.fillText(text, -40, 100);

      // 将canvas的内容转换为base64编码
      const data = canvas.toDataURL("image/png");
      target.style.background = "url(" + data + ") repeat";
    },

    // 设置水印
    setBlindWaterMark(str){
      
      const blindwatermark = new BlindWatermark({
        content: str||'',
        width: 200,
        height: 200,
        onSuccess: () => {
          // success callback
        }
      })
      blindwatermark.create()
    }
  },
};
</script>

<style lang="scss">
.wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    bottom: 0;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    > a,
    button {
      width: 12rem;
      height: 2rem;
      background: url(~@/assets/img/newbtn600.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.48rem;
      color: #fff;
      border: none;
      margin-top: 1.5rem;
    }
  }
}
#reportdtl {
  background: #fff;
  overflow: auto;
  max-width: 1200px;
  margin: 0 auto;
  header {
    padding: 0.6rem;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 0.84rem;
      font-weight: 600;
      color: #000;
    }
    .logo {
      flex-shrink: 0;
      height: fit-content;
    }
  }
  #playcon {
    padding: 0 0.6rem;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    > div {
      width: 100%;
      height: 2.96rem;
      padding: 0.48rem 0.6rem;
      box-sizing: border-box;
      background: #f1f1f1;
      border-radius: 0.2rem;
    }
  }
  #abstract {
    padding: 0.6rem;
    box-sizing: border-box;
    font-size: 0.7rem;
    line-height: 1.4rem;
    letter-spacing: 0.1rem;
    .abstract_cont {
      border-left: 0.2rem solid #007aff;
      padding: 0.14rem 0.4rem;
      box-sizing: border-box;
      color: #333;
    }
  }
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    top: -4rem;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    margin-bottom: -4rem;
    overflow: hidden;
    > a,
    button {
      width: 12rem;
      height: 2rem;
      background: url(~@/assets/img/newbtn600.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.48rem;
      color: #fff;
      border: none;
      margin-top: 1.5rem;
    }
  }
  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
    th,
    td {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
    }
  }
  #resetcss {
    pre {
      white-space: pre-wrap;
    }
    .no-wrap{
        page-break-inside: avoid;
        display: block;
    }
  }

  .chapter-wrap{
    .chapter-item{
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #ccc;
      &:last-child {
        border-bottom: none;
      }
			.type{
				font-size: 15px;
				color: #fff;
				padding: 5px 10px;
				background-color: #E6A23C;
				border-radius: 4px;
			}
			.title{
				font-size: 15px;
				margin-left: 10px;
				font-weight: bold;
			}
		}
  }

  .disclaimer{
      margin-top: 30px;
      font-size: 0.58rem;
      padding: 30px 0;
      border-top: 1px solid #ccc;
      h3 {
        margin-bottom: 20px;
      }
  }
}
// 不禁止页面打印,不然转pdf会出现空白页
@media print{
    body{
      display: unset;
    }
}
</style>