使用vue-pdf 给pdf加水印

admin管理员组

文章数量:1649179

<template>
  <el-container>
    <el-main id="myIframe">
      <pdf :page="pageNum" :src="fileUrl" @progress="loadedRatio = $event" @num-pages="totalPages=$event"></pdf>
    </el-main>
    <el-footer style="text-align:center">
      <el-button-group>
        <el-button round type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
        <el-button round type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ totalPages }}</div>
    </el-footer>
  </el-container>
</template>

<script>
  import pdf from 'vue-pdf'
  export default {

    name: "SHOWRESULTS",
    components: {
      pdf
    },
    data() {
      return {

        pageNum: 1, //显示第一页
        loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
        totalPages: 1, //pdf总页数
        fileUrl: "",
      };
    },
    computed:{
      baseUrl() {
            return this.$constants.baseUrl;
          },
    },
    methods: {
      //pdf地址urlId赋值
      setValue(data) {
        var sub = data.substring(6)
        this.fileUrl = this.baseUrl + sub
      },
      // 上一页
      prePage() {
        let page = this.pageNum
        page = page > 1 ? page - 1 : this.totalPages
        this.pageNum = page
      },

      // 下一页
      nextPage() {
        let page = this.pageNum
        page = page < this.totalPages ? page + 1 : 1
        this.pageNum = page
      },


      //获取pdf总页数
      getTotalPages() {
        let loadingTask = pdf.createLoadingTask(this.fileUrl)
        loadingTask.promise.then(pdf => {
          this.totalPages = pdf.numPages
        })
      },
      //获取水印
      setWatermarkContent(content) {
        let id = "1.23452384164.1223412415";
        if (document.getElementById(id) !== null) {
          document.body.removeChild(document.getElementById(id));
        }

        let ele = document.createElement("canvas");
        ele.width = 250;
        ele.height = 150;

        let getCanvas = ele.getContext("2d");
        getCanvas.rotate((-20 * Math.PI) / 180);
        getCanvas.font = "20px Vedana";
        getCanvas.fillStyle = "rgba(200, 200, 200, 0.35)";
        getCanvas.textAlign = "center";
        getCanvas.textBaseline = "Middle";
        getCanvas.fillText(content, ele.width / 6, ele.height / 2);
        // getCanvas.fillText(content2, ele.width / 6, (ele.height + 40) / 2)

        let div = document.createElement("div");
        div.id = id;
        div.style.pointerEvents = "none";
        div.style.top = "82px";
        div.style.left = "0px";
        div.style.position = "fixed";
        div.style.zIndex = "100000";
        div.style.width = document.documentElement.clientWidth + "px";
        div.style.height = document.documentElement.clientHeight + "px";
        div.style.background =
          "url(" + ele.toDataURL("image/png") + ") left top repeat";
        document.getElementById("myIframe").appendChild(div);
        return id;
      },
    },

    mounted() {
      this.setWatermarkContent("123456789");
      window.onresize = () => {
        this.setWatermarkContent("123456789");
      };
      //赋值pdf地址
      this.setValue(this.$route.query.url);
      //获取pdf总页数
      /* this.getTotalPages(); */
    },
  };
</script>

<style scoped>
  .el-container {
    height: 100%;
  }

  .el-main {
    height: auto;
  }

  .tips-text {
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
  }

  .tips-text i {
    color: #15559a;
  }

  #myIframe {
    height: 100%;
    text-align: center;
  }
</style>

本文标签： 水印vuePDF