pdf.js预览pdf文件并且使用进行图片签章功能

图片签章功能
来自这位大佬：https://blog.youkuaiyun.com/a15297701931/article/details/135062029
首先按照上面这个链接引入对应包

npm install fabric@5.3.0
npm install pdfjs-dist@2.5.207
npm install vuedraggable@2.24.3

不过略有调整：
1.删减了放缩功能，放开了调整图章大小的功能，前者和后者功能冲突
2.pdf.js中的getDocument方法使用的是data，pdf的arraybuffer格式
3.下面的/deep/调整成了::v-deep

// 这里的pdfUrl是arraybuffer格式，而不是url格式，不知道为啥，直接用url，不行
pdfjsLib.getDocument({
    data: pdfUrl, rangeChunkSize: 65536, disableAutoFetch: false })
        .promise.then((pdfDoc_) => {
   
          this.pdfDoc = pdfDoc_;
          this.numPages = this.pdfDoc.numPages;
          this.defaultNumPages = this.pdfDoc.numPages;
          this.$nextTick(() => {
   
            this.canvas = document.querySelectorAll('.the-canvas');
            this.canvas.forEach((item) => {
   
              this.ctx.push(item.getContext('2d'));
            });
            // 循环渲染pdf
            for (let i = 1; i <= this.numPages; i++) {
   
              this.renderPage(i).then(() => {
   
                this.renderPdf({
   
                  width: this.canvas[i - 1].width,
                  height: this.canvas[i - 1].height
                });
              });
            }
            setTimeout(() => {
   
              this.renderFabric();
              this.canvasEvents();
            }, 1000);
          });
        });

<!-- //?模块说明 =>  合同签章模块 addToTab-->
<template>
  <div class="contract-signature-view">
    <div class="title-operation">
      <h2 class="title">合同签章</h2>
      <div class="operation">
        <el-button type="danger" @click="removeSignature">删除签章</el-button>
        <el-button type="danger" @click="clearSignature">清空签章</el-button>
        <el-button type="primary" @click="submitSignature">提交签章</el-button>
      </div>
    </div>
    <div class="section-box">
      <!-- 签章图片 -->
      <aside class="signature-img">
        <div class="info">
          <h3 class="name">印章</h3>
          <p class="text">将示例印章标识拖到文件相应区域即可获取签章位置</p>
        </div>
        <!-- 拖拽 -->
        <draggable
          v-model="mainImagelist"
          :group="{ name: 'itext', pull: 'clone' }"
          :sort="false"
          @end="end"
        >
          <transition-group type="transition">
            <li
              v-for="item in mainImagelist"
              :key="item.img"
              class="item"
              style="text-align: center"
            >
              <img :src="item.img" width="100%;" height="100%" class="img" />
            </li>
          </transition-group>
        </draggable>
      </aside>
      <!-- 主体区域 -->
      <section class="main-layout" :class="{ 'is-first': isFirst }">
        <!-- 操作 -->
        <div class="operate-box">
          <div class="page-change">
            <i class="icon el-icon-arrow-left" @click="prevPage" />
            <!-- :min="1" -->
            <el-input
              class="input-box"
              v-model.number="pageNum"
              :max="defaultNumPages"
              @change="cutover"
            />
            <span class="default-text">/{
   {
    defaultNumPages }}</span>
            <i class="icon el-icon-arrow-right" @click="nextPage" />
          </div>
        </div>
        <!-- 画图 -->
        <div class="out-view" :class="{ 'is-show': isShowPdf }">
					<div class="all-canvas">
						<div class="canvas-layout" v-for="item in numPages" :key="item">
							<!-- pdf部分 -->
							<canvas class="the-canvas" />
							<!-- 盖章部分 -->
							<canvas class="ele-canvas"></canvas>
						</div>
					</div>
        </div>
        <i class="loading" v-loading="!isShowPdf" />
      </section>
      <!-- 位置信息 -->
      <div class="position-info">
        <h3 class="title">位置信息</h3>
        <ul class="nav">
          <li class="item" v-for="(item, index) in coordinateList" :key="index">
            <span>{
   {
    item.name }}</span>
            <span>{
   {
    item.page }}</span>
            <span>{
   {
    item.left }}</span>
            <span>{
   {
    item.top }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// 拖拽插件
import draggable from 'vuedraggable';
// pdf插件
import {
    fabric } from 'fabric';
import workerSrc from 'pdfjs-dist/es5/build/pdf.worker.entry';
const pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
import outputPDF from '../../../utils/htmlToPdf'

export default {
   
  components: {
    draggable },
  data() {
   
    return {
   
      // pdf地址
      pdfUrl: