file_safe_dd_web/src/views/list/pdf.vue

<template>
  <div class="cpdf" id="cpdf">
    <Loading :loading="loading" />
    <canvas v-for="item in numPages" :key="item" :id="'pdf'+item" />
  </div>

</template>

<script>
  import * as dd from 'dingtalk-jsapi';
  import Loading from '@/components/Loading';
  import pdfjsLib from 'pdfjs-dist';
  export default {
    components: {
      // pdfjsLib,
      Loading
    },
    data() {
      return {
        numPages: 0,
        pdfSrc: '', // pdf文件地址
        loading: true
      }
    },
    created() {

      if (this.$route.query.path) {
        this.loadPdfHandler(this.$route.query.path);
      }

      if (this.$route.query.title) {
        this.ChangePageTitle(this.$route.query.title)
      }

      if (this.$route.query.id) {
        this.getDetail();
      } else {
        this.loading = false;
        // let path = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'//你的pdf地址
        // this.loadPdfHandler(path);
      }
      // if (dd.env.platform != 'notInDingTalk') {
      //   dd.biz.util.share({
      //     type: 2,//分享类型，0:全部组件 默认；1:只能分享到钉钉；2:不能分享，只有刷新按钮
      //     url: '',
      //     title: '',
      //     content: '',
      //     image: null,
      //     onSuccess: function () {
      //       //onSuccess将在调起分享组件成功之后回调
      //       /**/
      //     },
      //     onFail: function (err) { }
      //   })
      // }
    },
    methods: {
      // pdf加载时
      loadPdfHandler(path,watermark) {
        try {
          let loadingTask = pdfjsLib.getDocument({
            url: path,
            // cMapUrl: "https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/",
            // cMapUrl:"../../assets/cmaps/",
            // cMapPacked: true
          });

          let _this = this;

          loadingTask.promise.then((pdf) => {
            this.numPages = pdf.numPages;
            for (let i = 1; i <= pdf.numPages; i++) {
              pdf.getPage(i).then(function (page) {
                let scale = 5; //缩放比例
                let viewport = page.getViewport(scale);
                let canvas = document.getElementById('pdf' + i);
                let context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                canvas.style.width = '100%';
                context.font = "24px 宋体"
                context.fillStyle = "#FFC82C"
                // 设置右对齐
                context.textAlign = 'right'
                alert(watermark);
                alert(canvas.width-20);
                alert(canvas.height-20);
                // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
                context.fillText(watermark, canvas.width - 20, canvas.height - 20)
                let renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };

                page.render(renderContext);
              });
            }
            _this.loading = false;

          }).catch(() => {

            _this.loading = false;
          });

        } catch (e) {
          // 错误处理代码片段
          this.loading = false;
        }
      },
      getDetail() {
        let self = this;
        this.$api.user.getDetail(this.$route.query.id, localStorage.userId || '').then((response) => {
          const res = response.data.data;
          let path = res.data.path || ''
          self.loadPdfHandler(path,res.data.watermark);
          self.ChangePageTitle(res.data.fileName);
        }).catch(() => {
          self.loading = false;
        });
      },
      ChangePageTitle(title) {
        if (dd.env.platform != 'notInDingTalk') {
          dd.ready(function () {
            dd.biz.navigation.setTitle({
              title: title, //控制标题文本，空字符串表示显示默认文本
              onSuccess: function () {},
              onFail: function () {}
            });
          });
        } else {
          document.title = title
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .cpdf {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;

    .center {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .contor {
      display: flex;
      justify-content: center;
      margin: 20px;
      padding: 10px;

      .bottom {
        font-size: 15px;
        padding-top: 5px;
      }
    }
  }
</style>