Vue3预览pdf（增加水印&禁止下载）

需求：

根据后端返回的base64位pdf编码，预览pdf文件同时增加水印，禁止下载功能

用到的功能

1. Vue3
2. element plus 的 watermark
3. pdfjs-dist(只用于获取文件页数) 版本：2.16.105
4. iframe(用于展示pdf)

遇到的问题

1. 引用pdfjs报错
2. 鼠标右键可以直接下载pdf
3. pdf展示不全,因为是用iframe来预览pdf，如果未指定高度的话且增加了遮罩的话会出现无法滚动的问题

解决：

1.引用pdfjs-dist会报错
报错的引用

import { PdfJs } from "pdfjs-dist";

改正后的引用

import * as PdfJs from "pdfjs-dist/legacy/build/pdf.js";

还有一个问题，在配置workerSrc的时候版本号要与依赖的版本号一致，不然也会报错

PdfJs.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.worker.js";

2.iframe提供了隐藏功能按键的方式，就是在src地址后面增加 ‘#toolbar=0’ 但是如果使用鼠标右键的话还是可以直接保存文件到电脑，不符合产品要求，最后考虑增加蒙层来达到禁止下载的目的

<div class="bf_mask" @contextmenu.prevent=""></div>

3.之前并没有计划使用插件来做这个功能，但是增加了遮罩之后，出现pdf无法滚动的情况，想到的解决方法是给iframe设置高度，所以就用了插件来获取文件的页数然后计算出高度实现页面滚动

const loadingTask = PdfJs.getDocument(pdfUrl);
loadingTask.promise.then(pdf => {
  pdfPages.value = pdf.numPages;
  pdfHeight.value = 1150 * pdfPages.value + "vh"; // iframe 的高度 :height="pdfHeight"
});

代码：

html代码

<template>
  <div class="content">
    <el-watermark :font="font" content="资料仅限查看，严禁外传" style="height: auto">
      <iframe :src="pdfUrl + '#toolbar=0'" frameborder="0" style="width: 100%; border: 0" :height="pdfHeight"></iframe>
      <div class="bf_mask" @contextmenu.prevent=""></div>
    </el-watermark>
  </div>
</template>

效果：