Vue实战中遇到的常见的问题总结(七)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

前端为本地已生成的pdf文件添加水印

在项目开发，遇到一个需求：就是对于已存在的pdf添加水印。实际上，前端也可实现该功能。那么，应该如何实现呢？经过查阅资料和对比，得出利用pdf-lib库即可更简单的实现该需求。所以，我们要做的第一份工作就是仔细研读官网的demo和文档，以及借鉴其源码，再进行开发。以下就是其官网地址和源码地址。

官网地址：pdf-lib.js.org/

源码地址：github.com/Hopding/pdf…

值得注意的一点是：如是添加图片水印，该水印图片需为网络图片

首先引入插件

  <script src="https://unpkg.com/pdf-lib@1.4.0"></script>

以下就是简单的实现，仅供参考

  <script>
    const { degrees, PDFDocument, rgb, StandardFonts } = PDFLib
    async function modify() {
        const url = 'xxx';
        const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())
        const pdfDoc = await PDFDocument.load(existingPdfBytes)
        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
        //为所有pdf添加图片水印
        const img ="http://xxx/水印.png";
        const ImgCover = await fetch(img).then((res) =>res.arrayBuffer());
        const eleImgCover = await pdfDoc.embedPng(ImgCover);
         pages.forEach((item) => {
        item.drawImage(eleImgCover, {
          x: item.getWidth() / 2 - eleImgCover.width / 4,
          y: item.getHeight() / 2,
          width: eleImgCover.width/2,
          height: eleImgCover.height/2,
        });
      });
      const pdfBytes = await pdfDoc.save();
          download(pdfBytes,test.pdf, "application/pdf");
    }
  </script>

实现全屏显示功能

经常，在开发一些后台管理系统等需要用到全屏展示功能。那么本文就贴一下自己在开发过程用到的全屏展示功能的代码，以供参考。

首先是界面上对于取消全屏和全屏展示的样式展示，定义一个fullscreen表示取消全屏和全屏的标志位。

<div class="btn-fullscreen" @click="handleFullScreen">
   <el-tooltip effect="dark" :content="fullscreen?'取消全屏':'全屏'" placement="bottom">
   <i class="el-icon-rank"></i>
   </el-tooltip>
</div>

触发全屏事件的事件如下：

// 全屏事件
handleFullScreen() {
 let element = document.documentElement;
 if (this.fullscreen) {
    if (document.exitFullscreen) {
       document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
   } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
  }
  } else {
     if (element.requestFullscreen) {
        element.requestFullscreen();
     } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
         element.mozRequestFullScreen();
   } else if (element.msRequestFullscreen) {
        // IE11
       element.msRequestFullscreen();
    }
 }
 this.fullscreen = !this.fullscreen;
}