vue 前端实现对pdf添加批注

原创

已于 2022-09-01 16:22:58 修改 · 9.3k 阅读

65 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-05-13 17:46:39 首次发布

本文介绍了如何在Vue前端项目中利用pdf-lib库和Quill富文本编辑器实现PDF文件的批注功能。首先通过npm安装pdf-lib和Quill，然后详细阐述了将批注集成到PDF的具体步骤，最终展示实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、选择pdf-lib插件对pdf进行修改，安装npm install --save pdf-lib
选择quill插件作为添加批注时的富文本编辑框，安装npm install --quill
2、实现内容

<template>
  <div>
    <div class="view-box" :style="`width:${pdfSize.width}px;height:${pdfSize.height}px;user-select:none`">
      <iframe :src="`${pdfContent}#scrollbars=0&toolbar=0&statusbar=0`" ref="pdfViewer" v-show="pdfContent !== null" width="100%" height="100%"></iframe>
      <div class="board" @dblclick.stop="activeEdit($event)" @click.stop='closeEdit' @mousedown="moveDownPosition" @mousemove='movePosition' @mouseup='mouseupPosition'>
        <!-- 文字显示 -->
        <div v-for="(d,index) in contentList" :data-id='index' :key='index' class="divbox" :style="`position:absolute;z-index:3;left:${d.left-6}px;top:${d.top-8}px;color:red`" @dblclick.stop="activeClick(d)">
          <i class="el-icon-circle-close closediv" size='32' @click.stop='removediv(d,index)'></i>
          <div v-html='d.inputValue'></div>
        </div>
        <!-- 标注框显示 -->
        <svg class="svgLine" id='svgLine'>
          <rect :width='d.width' :height='d.height' :x='d.x' :y='d.y' class="svgrect" @dblclick.stop="removeLine(d,index)" v-for='(d,index) in lineList' :key='index'></rect>
        </svg>
      </div>
      <!-- 弹出写文字的框 -->
      <div v-if="inputShow" :style="inputPosition" class="inputBox">
        <textarea   :rows="10" v-model="inputContent.inputValue" style='width:300px;' />
        <!-- <editor v-model="inputContent.inputValue" @blur="closeEdit" style='width:300px;height:200px'/> -->
        <div class="sureBtn">
          <el-button size="mini" @click="closeEdit">取消</el-button>
          <el-button type="success" size="mini" @click="submitEdit">确定</el-button>
        </div>
      </div>
      <!-- 换页 -->
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="d => (page=d) && modifyPdf(d)" :current-page="page" :page-size="1">
      </el-pagination>
      <el-button @click='saveAs'>保存</el-button>
    </div>
  </div>
</template>
 
<script>
import { PDFDocument, rgb } from "pdf-lib";
// import Editor from '@tinymce/tinymce-vue';
import fontki