devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue如何实现PDF批注（使用pdf-lib库，附代码）

作者：Guff_9hys | 2024-07-30 09:55:15

赞

踩

pdf-lib

最终实现的功能有：自由线条和绘制矩形框框进行批注，改变线条的颜色，文字批注，插入字符串和撤回；

首先展示一下最终实现的效果：

开发前准备(还需要到github上下载字体包STSong.TTF)：

  1. npm install pdf-lib
  2. npm install @pdf-lib/fontkit
  3. npm install jquery

下面是全部实现代码，大体逻辑就是：

  1. PDF渲染：

    • 使用mounted生命周期钩子使用fetch API获取PDF文档，并使用PDFDocument.load方法加载为PDF文档对象。
    • 在函数modifyPdf（）中将线条数组和内容数组添加到pdf文档中，在使用createObjectURL生成iframe的src。

  2. 批注功能：

    • 组件允许用户添加各种类型的批注，包括自由线条、矩形和文字。
    • 批注存储在contentListAll和lineListAll数组中，代表所有页面上的所有批注。
    • 当渲染特定页面的PDF（modifyPdf方法）时，当前页面的批注被过滤并存储在contentList和lineList数组中。
    • 使用mousemove、mousedown和mouseup事件实现文本批注的拖放功能。
    • startDrawing、draw和stopDrawing方法处理自由线条的创建。
    • drawLineDone方法处理矩形批注的创建。

  3. 文本批注编辑：

    • 双击文本批注会打开一个编辑框（activeClick方法），允许用户修改文本。
    • 当保存编辑后，会调用submitEdit方法。
  1. <template>
  2.   <div>
  3.     <div class="choosed-box">
  4.       <div class="choose-line">
  5.         <h3 style="margin: 0;line-height: 40px;margin-right: 10px;font-weight: 500;">线条形状:</h3>
  6.         <el-select v-model="choosedLineValue" placeholder="请选择形状" style="width: 60%;" @change="switchDrawingMode">
  7.           <el-option
  8.             v-for="item in options"
  9.             :key="item.value"
  10.             :label="item.label"
  11.             :value="item.value"
  12.           />
  13.         </el-select>
  14.       </div>
  15.       <div class="choose-color">
  16.         <h3 style="margin: 0;line-height: 40px;margin-right: 10px;font-weight: 500;">线条颜色:</h3>
  17.         <el-color-picker v-model="lineColor" />
  18.       </div>
  19.       <div class="choose-color">
  20.         <h3 style="margin: 0;line-height: 40px;margin-right: 10px;font-weight: 500;">文本批注:</h3>
  21.         <el-tooltip
  22.           class="flex-center"
  23.           style="font-size: 18px; margin-left: 10px; display: flex !important;"
  24.           effect="dark"
  25.           content="双击进行文字批注"
  26.           placement="right"
  27.         >
  28.           <i class="el-icon-question" />
  29.         </el-tooltip>
  30.       </div>
  31.       <div class="writing-box">
  32.         <button class="button" @click="insertSignature">
  33.           插入教师签名
  34.           <svg fill="currentColor" viewBox="0 0 24 24" class="icon">
  35.             <path clip-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" fill-rule="evenodd" />
  36.           </svg>
  37.  
  38.         </button>
  39.       </div>
  40.       <div class="writing-box">
  41.         <button class="button" @click="insertDate">
  42.           插入日期
  43.           <svg fill="currentColor" viewBox="0 0 24 24" class="icon">
  44.             <path clip-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" fill-rule="evenodd" />
  45.           </svg>
  46.  
  47.         </button>
  48.       </div>
  49.       <div class="writing-box">
  50.         <button class="delete-button" @click="undoDrawing">
  51.           Back
  52.         </button>
  53.         <el-tooltip
  54.           class="flex-center"
  55.           style="font-size: 18px; margin-left: 10px; display: flex !important;"
  56.           effect="dark"
  57.           content="将根据选择的线条形状撤回"
  58.           placement="right"
  59.         >
  60.           <i class="el-icon-question" />
  61.         </el-tooltip>
  62.       </div>
  63.     </div>
  64.  
  65.     <div class="view-box" :style="`width:${pdfSize.width}px;height:${pdfSize.height}px;user-select:none`">
  66.       <iframe v-show="pdfContent !== null" ref="pdfViewer" :src="`${pdfContent}#scrollbars=0&toolbar=0&statusbar=0`" width="100%" height="100%" />
  67.       <div class="board" @dblclick.stop="activeEdit($event)" @click.stop="closeEdit" @mousedown="moveDownPosition" @mousemove="movePosition" @mouseup="mouseupPosition">
  68.         <!-- 文字显示 -->
  69.         <div v-for="(d,index) in contentList" :key="index" :data-id="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)">
  70.           <i class="el-icon-circle-close closediv" size="32" @click.stop="removediv(d,index)" />
  71.           <div v-html="d.inputValue" />
  72.         </div>
  73.         <!-- 标注框显示 -->
  74.         <svg id="svgRect" class="svgRect">
  75.           <g>
  76.             <rect v-for="(d,index) in lineList" :key="index" :width="d.width" :height="d.height" :x="d.x" :y="d.y" class="svgrect" />
  77.           </g>
  78.         </svg>
  79.  
  80.         <!-- 绘制自由线条的svg -->
  81.         <svg id="svgLine" class="svgLine" @mousedown.stop="startDrawing" @mousemove.stop="draw" @mouseup.stop="stopDrawing">
  82.           <g>
  83.             <path v-for="(line, index) in freehandLines" :key="index" :d="line.pathData" :stroke="line.color" stroke-width="2" fill="none" />
  84.           </g>
  85.         </svg>
  86.       </div>
  87.       <!-- 弹出写文字的框 -->
  88.       <div v-if="inputShow" :style="inputPosition" class="inputBox">
  89.         <textarea v-model="inputContent.inputValue" :rows="10" style="width:300px;" />
  90.         <!-- <editor v-model="inputContent.inputValue" @blur="closeEdit" style='width:300px;height:200px'/> -->
  91.         <div class="sureBtn">
  92.           <el-button size="mini" @click="closeEdit">取消</el-button>
  93.           <el-button type="success" size="mini" @click="submitEdit">确定</el-button>
  94.         </div>
  95.       </div>
  96.       <!-- 换页 -->
  97.       <div style="display: flex;flex-direction: row;height: 80px;justify-content: center;align-items: center;">
  98.         <el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="1" @current-change="d => (page=d) && modifyPdf(d)" />
  99.         <el-button @click="saveAs">保存</el-button>
  100.       </div>
  101.     </div>
  102.   </div>
  103. </template>
  104.  
  105. <script>
  106. import { PDFDocument, rgb } from 'pdf-lib'
  107. import fontkit from '@pdf-lib/fontkit'
  108. import $ from 'jquery'
  109. export default {
  110.   name: 'PdfEdit',
  111.   props: {
  112.     pdfParam: {
  113.       type: String,
  114.       default: ''
  115.     },
  116.     pdfIdMsg: {
  117.       type: Object,
  118.       required: true
  119.     }
  120.   },
  121.   // components: { Editor },
  122.   data() {
  123.     return {
  124.       userName: this.$store.state.user.realname,
  125.       pdfSize: {
  126.         width: 0,
  127.         height: 0
  128.       },
  129.       lineColor: 'black',
  130.       inputPosition: {
  131.         position: 'absolute',
  132.         top: '0px',
  133.         left: '0px',
  134.         zIndex: 4
  135.       },
  136.       options: [{
  137.         value: '选项1',
  138.         label: '自由线条'
  139.       }, {
  140.         value: '选项2',
  141.         label: '矩形'
  142.       }],
  143.       choosedLineValue: '',
  144.       inputShow: false,
  145.       inputContent: {
  146.         inputValue: null,
  147.         contentsList: [],
  148.         top: 0,
  149.         left: 0,
  150.         show: 1
  151.       },
  152.       contentListAll: [],
  153.       contentList: [],
  154.       pdfUrl: '',
  155.       pdfContent: '',
  156.       total: 0,
  157.       pdfDoc: {},
  158.       page: 1,
  159.       height: 0,
  160.       node: null,
  161.       select: this.$store.state.word.select,
  162.       groupId: this.$store.state.word.select.groupId,
  163.       experienceId: this.$store.state.word.select.experienceId,
  164.       pdfTempDoc: null,
  165.       lineListAll: [],
  166.       lineList: [],
  167.       ubuntuFont: null,
  168.       testParam: '',
  169.       drawing: false,
  170.       pathData: '',
  171.       freehandLines: [] // 用于存储自由线条的数组
  172.     }
  173.   },
  174.   watch: {
  175.     lineColor: function(newColor) {
  176.       // 更新样式
  177.       const svgRects = document.querySelectorAll('.svgrect')
  178.       svgRects.forEach((rect) => {
  179.         rect.style.stroke = newColor
  180.       })
  181.  
  182.       const svgPaths = document.querySelectorAll('.svgLine path')
  183.       svgPaths.forEach((path) => {
  184.         path.style.stroke = newColor
  185.       })
  186.     }
  187.     // ...其他 watch 监听
  188.   },
  189.   created() {
  190.     const select = {
  191.       experienceId: this.pdfIdMsg.eid,
  192.       wordId: this.pdfIdMsg.wid,
  193.       userId: this.pdfIdMsg.uid,
  194.       experienceName: '',
  195.       experienceScore: '',
  196.       groupName: '',
  197.       groupId: this.pdfIdMsg.gid
  198.     }
  199.  
  200.     this.$store.commit('word/SET_SELECT', select)
  201.   },
  202.   mounted() {
  203.     this.pdfUrl = process.env.VUE_APP_TARGET_API + '/ljkj_experienceFile/' + this.pdfIdMsg.uid + '.' + this.pdfIdMsg.gid + '.' + this.pdfIdMsg.eid + '.pdf'
  204.     var url = this.pdfUrl + '?' + Math.random()// 去除缓存
  205.     const _this = this
  206.     async function getPdfContent() { // 加载pdf，并分页
  207.       const arrayBuffer = await fetch(url, { mode: 'cors' }).then((res) => res.arrayBuffer())
  208.       _this.pdfDoc = await PDFDocument.load(arrayBuffer)
  209.       _this.total = _this.pdfDoc.getPages().length// 总页数
  210.       _this.modifyPdf(1)// 显示第一页
  211.       // _this.drawLineDone()// 添加画线事件
  212.     }
  213.     getPdfContent()
  214.   },
  215.   methods: {
  216.     // 文字拖动事件
  217.     moveDownPosition(position) {
  218.       const index = $(position.target).parents('.divbox').data('id')
  219.       this.node = this.contentListAll[index]
  220.     },
  221.     movePosition(position) {
  222.       if (this.node) {
  223.         // eslint-disable-next-line no-empty
  224.         if ((this.node.left < 0 && position.movementX < 0) || (this.node.top < 0 && position.movementY < 0) || (this.node.left > this.pdfSize.width && position.movementX > 0) || (this.node.top > this.pdfSize.height && position.movementY > 0)) {
  225.         } else {
  226.           this.node.left = this.node.left * 1 + position.movementX * 1
  227.           this.node.top = this.node.top * 1 + position.movementY * 1
  228.         }
  229.       }
  230.     },
  231.     mouseupPosition(position) {
  232.       this.node = null
  233.     },
  234.     // 切换绘制方式时调用
  235.     switchDrawingMode() {
  236.     // 清除之前绑定的所有事件
  237.  
  238.       // 根据选择的形状调用对应的绘制函数
  239.       if (this.choosedLineValue === '选项2') {
  240.         this.drawLineDone()
  241.       } else if (this.choosedLineValue === '选项1') {
  242.         $('#svgLine').off('mousedown mousemove mouseup')
  243.       }
  244.     },
  245.     getFormattedDate() {
  246.       const today = new Date()
  247.  
  248.       // 获取年、月、日
  249.       const year = today.getFullYear().toString()
  250.       const month = ('0' + (today.getMonth() + 1)).slice(-2) // 月份从0开始，需要加1
  251.       const day = ('0' + today.getDate()).slice(-2)
  252.  
  253.       // 组合成 "YYYY-MM-DD" 格式
  254.       const formattedDate = `${year}-${month}-${day}`
  255.  
  256.       return formattedDate
  257.     },
  258.     insertDate() {
  259.       const insertDate = this.getFormattedDate()
  260.       const insertContent = {
  261.         contentsList: [],
  262.         inputValue: insertDate,
  263.         top: '20',
  264.         left: '20',
  265.         page: 1,
  266.         show: 0
  267.       }
  268.       var inputContent = JSON.parse(JSON.stringify(insertContent))
  269.       this.contentListAll.push(inputContent)
  270.       this.contentList.push(inputContent)
  271.       console.log(insertDate)
  272.     },
  273.     insertSignature() {
  274.       const insertName = this.userName
  275.       let paramLeft = this.pdfSize.width - 80
  276.       paramLeft = paramLeft.toString()
  277.       const insertContent = {
  278.         contentsList: [],
  279.         inputValue: insertName,
  280.         top: '20',
  281.         left: paramLeft,
  282.         page: 1,
  283.         show: 0
  284.       }
  285.       var inputContent = JSON.parse(JSON.stringify(insertContent))
  286.       this.contentListAll.push(inputContent)
  287.       this.contentList.push(inputContent)
  288.     },
  289.     // 添加画线矩形事件
  290.     drawLineDone() {
  291.       var _this = this
  292.       $('#svgLine').mousedown(function(position) {
  293.         const that = this
  294.         const x1 = position.offsetX
  295.         const y1 = position.offsetY
  296.         const str = {
  297.           page: _this.page,
  298.           x: x1 * 1,
  299.           y: y1 * 1,
  300.           width: 0,
  301.           height: 0
  302.         }
  303.         _this.lineList.push(str)
  304.         $(this).mousemove(function(e) {
  305.           const x = e.offsetX
  306.           const y = e.offsetY
  307.           const width = x - x1 * 1
  308.           const height = y - y1 * 1
  309.           if (width > 0) {
  310.             str.width = width
  311.           } else {
  312.             str.width = -width
  313.             str.x = x
  314.             str.y = y
  315.           }
  316.           if (height > 0) {
  317.             str.height = height
  318.           } else {
  319.             str.height = -height
  320.             str.x = x
  321.             str.y = y
  322.           }
  323.         })
  324.         $(this).mouseup(function(e) {
  325.           $(that).unbind('mousemove')
  326.           $(that).unbind('mouseup')
  327.           _this.lineListAll.push(str)
  328.  
  329.           // 手动设置新矩形的颜色
  330.           const newRect = document.querySelector('.svgrect:last-child')
  331.           if (newRect) {
  332.             newRect.style.stroke = _this.lineColor
  333.           }
  334.         })
  335.       })
  336.     },
  337.     // 删除文字
  338.     removediv(d, index) {
  339.       this.$confirm('确定要删除该标记吗?', '提示', {
  340.         type: 'warning'
  341.       }).then(() => {
  342.         this.contentList.splice(index, 1)
  343.         let temp = ''
  344.         this.contentListAll.map((val, index) => {
  345.           if (val === d) {
  346.             temp = index
  347.             return
  348.           }
  349.         })
  350.         this.contentListAll.splice(temp, 1)
  351.       })
  352.     },
  353.     // 自由线条
  354.     startDrawing(event) {
  355.       if (this.choosedLineValue === '选项1') {
  356.         this.drawing = true
  357.         const { offsetX, offsetY } = event
  358.         this.pathData = `M ${offsetX} ${offsetY}`
  359.  
  360.         // 新增：添加新的自由线条对象到数组
  361.         this.freehandLines.push({
  362.           pathData: `M ${offsetX} ${offsetY}`,
  363.           color: this.lineColor
  364.         })
  365.       }
  366.     },
  367.  
  368.     draw(event) {
  369.       if (this.drawing && this.choosedLineValue === '选项1') {
  370.         const { offsetX, offsetY } = event
  371.         this.pathData += ` L ${offsetX} ${offsetY}`
  372.  
  373.         // 新增：更新最后一个自由线条对象的 pathData
  374.         if (this.freehandLines.length > 0) {
  375.           this.freehandLines[this.freehandLines.length - 1].pathData += ` L ${offsetX} ${offsetY}`
  376.         }
  377.       }
  378.     },
  379.  
  380.     stopDrawing() {
  381.       if (this.choosedLineValue === '选项1') {
  382.         this.drawing = false
  383.       }
  384.     },
  385.     undoDrawing() {
  386.       // 在这里根据选择的值进行处理
  387.       if (this.choosedLineValue === '选项1') {
  388.         // 处理选项一的情况，撤回自由线条
  389.         this.undoFreehandLines()
  390.       } else if (this.choosedLineValue === '选项2') {
  391.         // 处理选项二的情况，撤回矩形线条
  392.         this.undoRectangles()
  393.       }
  394.     },
  395.  
  396.     undoFreehandLines() {
  397.       // 实现撤回自由线条的逻辑
  398.       // 你需要根据你的数据结构删除最后一条自由线条
  399.       if (this.freehandLines.length > 0) {
  400.         this.freehandLines.pop()
  401.       }
  402.     },
  403.  
  404.     undoRectangles() {
  405.       // 实现撤回矩形线条的逻辑
  406.       // 你需要根据你的数据结构删除最后一条矩形线条
  407.       if (this.lineList.length > 0) {
  408.         this.lineList.pop()
  409.       }
  410.     },
  411.     // 显示pdf和各未保存的标记
  412.     async modifyPdf(p) { // p是显示第几页
  413.       this.contentList = []
  414.       this.lineList = []
  415.       this.closeEdit()
  416.       for (let i = 0; i < this.contentListAll.length; i++) { // 该页所存在的文字
  417.         if (this.contentListAll[i].page === p) {
  418.           this.contentList.push(JSON.parse(JSON.stringify(this.contentListAll[i])))
  419.         }
  420.       }
  421.       for (let i = 0; i < this.lineListAll.length; i++) { // 该页所存在的线
  422.         if (this.lineListAll[i].page === p) {
  423.           this.lineList.push(JSON.parse(JSON.stringify(this.lineListAll[i])))
  424.         }
  425.       }
  426.       const _this = this
  427.       const page = _this.pdfDoc.getPage(p * 1 - 1)
  428.       const { width, height } = page.getSize()
  429.       this.height = height
  430.       _this.pdfSize.width = `${width + 2}`
  431.       _this.pdfSize.height = `${height + 2}`
  432.       const pdfTempDoc = await PDFDocument.create()// pdf的显示
  433.       const copiedPages = await pdfTempDoc.copyPages(_this.pdfDoc, [p * 1 - 1])
  434.       pdfTempDoc.addPage(copiedPages[0])
  435.       if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  436.         const blob = new Blob([await pdfTempDoc.save()], { type: 'application/pdf' })
  437.         console.log(blob)
  438.       } else {
  439.         const pdfUrl = URL.createObjectURL(
  440.           new Blob([await pdfTempDoc.save()], { type: 'application/pdf' })
  441.         )
  442.         _this.pdfContent = pdfUrl
  443.       }
  444.     },
  445.     // 在PDF-lib库中，borderColor 期望的类型是 Color，而不是简单的字符串。你可以使用PDF-lib提供的 rgb 函数来创建颜色对象。
  446.     hexToRgb(hex) {
  447.       // 去掉可能的 # 前缀
  448.       hex = hex.replace(/^#/, '')
  449.  
  450.       // 解析RGB值
  451.       const bigint = parseInt(hex, 16)
  452.       const r = (bigint >> 16) & 255
  453.       const g = (bigint >> 8) & 255
  454.       const b = bigint & 255
  455.  
  456.       return { r, g, b }
  457.     },
  458.     // 保存pdf
  459.     async saveAs() {
  460.       const { r, g, b } = this.hexToRgb(this.lineColor)
  461.       const paramColor = rgb(r / 255, g / 255, b / 255)
  462.       const pages = this.pdfDoc.getPages()
  463.       const url = require('@/assets/STSong.TTF')
  464.  
  465.       const fontBytes = await fetch(url).then((res) => res.arrayBuffer())// 添加字体包，没有字体包不显示中文
  466.       this.pdfDoc.registerFontkit(fontkit)
  467.       this.ubuntuFont = await this.pdfDoc.embedFont(fontBytes, { subset: true })// 不加subset:true,pdf会变得很大
  468.       // 把所有的文字和线框的标记都画到pdf上去
  469.       for (let k = 0; k < this.page; k++) {
  470.         const firstPage = pages[k]
  471.         for (let i = 0; i < this.contentListAll.length; i++) {
  472.           const content = this.contentListAll[i]
  473.           if (content.page - 1 === k) {
  474.             // for (let j = 0; j < content.contentsList.length; j++) {
  475.             const text = content.inputValue
  476.             firstPage.drawText(text, {
  477.               x: content.left * 1,
  478.               y: this.height * 1 - content.top * 1,
  479.               size: 14,
  480.               font: this.ubuntuFont,
  481.               color: paramColor
  482.             })
  483.           }
  484.           // }
  485.         }
  486.  
  487.         for (let i = 0; i < this.lineListAll.length; i++) {
  488.           const content = this.lineListAll[i]
  489.           if (content.page - 1 === k) {
  490.             const firstPage = pages[k]
  491.             firstPage.drawRectangle({
  492.               x: content.x * 1,
  493.               y: this.height * 1 - content.y * 1,
  494.               width: content.width * 1,
  495.               height: -content.height * 1,
  496.               borderWidth: 2,
  497.               borderColor: paramColor,
  498.               opacity: 0,
  499.               borderOpacity: 1
  500.             })
  501.           }
  502.         }
  503.       }
  504.       // 保存自由线条
  505.       for (let k = 0; k < this.page; k++) {
  506.         const firstPage = pages[k]
  507.  
  508.         // 保存自由线条
  509.         for (let i = 0; i < this.freehandLines.length; i++) {
  510.           const line = this.freehandLines[i]
  511.           if (line.page - 1 === k) {
  512.             firstPage.drawSvgPath(line.pathData, {
  513.               borderColor: paramColor,
  514.               borderWidth: 2
  515.             })
  516.           }
  517.         }
  518.       }
  519.       // 把pdf转化成base64
  520.       const pdfContent = await this.pdfDoc.saveAsBase64({
  521.         dataUri: true
  522.       })
  523.       const base64Data = pdfContent.split(',')[1]
  524.       // 将Base64字符串转换为Uint8Array
  525.       const byteCharacters = atob(base64Data)
  526.       const byteNumbers = new Array(byteCharacters.length)
  527.       for (let i = 0; i < byteCharacters.length; i++) {
  528.         byteNumbers[i] = byteCharacters.charCodeAt(i)
  529.       }
  530.       const uint8Array = new Uint8Array(byteNumbers)
  531.  
  532.       // 创建Blob对象
  533.       const blob = new Blob([uint8Array], { type: 'application/pdf' })
  534.  
  535.       // 现在，'blob' 是一个Blob对象，你可以使用它进行后续操作
  536.  
  537.       // 此处调接口，把base64返给后台
  538.       const pdfRawData = blob
  539.       const htmlString = ''
  540.       this.$store.dispatch('word/uploadExperiencePdf', {
  541.         htmlString,
  542.         pdfRawData
  543.       })
  544.       this.contentListAll = []
  545.       this.contentList = []
  546.       this.lineListAll = []
  547.       this.lineList = []
  548.       this.modifyPdf(this.page)
  549.     },
  550.     // 双击打开写字板
  551.     activeEdit(e) {
  552.       const { offsetX, offsetY } = e
  553.       this.inputPosition.top = `${offsetY}px`
  554.       this.inputPosition.left = `${offsetX}px`
  555.       this.inputShow = true
  556.       this.inputContent.top = `${offsetY}`
  557.       this.inputContent.left = `${offsetX}`
  558.       this.inputContent.page = this.page
  559.       this.inputContent.show = 0
  560.     },
  561.     // 保存文字
  562.     submitEdit() {
  563.       if (this.inputContent.show === 0) {
  564.         var inputContent = JSON.parse(JSON.stringify(this.inputContent))
  565.         console.log(inputContent)
  566.         this.contentListAll.push(inputContent)
  567.         this.contentList.push(inputContent)
  568.       }
  569.       this.closeEdit()
  570.     },
  571.     // 关闭写字板
  572.     closeEdit() {
  573.       this.inputContent = JSON.parse(JSON.stringify(this.inputContent))
  574.       this.inputContent.inputValue = null
  575.       this.inputShow = false
  576.     },
  577.     // 双击修改文字标记
  578.     activeClick(d) {
  579.       this.inputContent = d
  580.       this.inputPosition.left = `${d.left}px`
  581.       this.inputPosition.top = `${d.top}px`
  582.       this.inputContent.show = 1
  583.       this.inputShow = true
  584.     }
  585.   }
  586. }
  587. </script>
  588.  
  589. <style scoped>
  590. .view-box {
  591.   position: relative;
  592.   border: 1px solid #ccc;
  593.   width: 100%;
  594.   height: 600px;
  595.   margin: 10px auto;
  596.   margin-bottom: 50px;
  597. }
  598. .pdf-input {
  599.   width: 100px;
  600.   line-height: 20px;
  601.   border: 1px solid #ccc;
  602.   background: #eee;
  603.   z-index: 3;
  604. }
  605. .inputBox {
  606.   background: #fff;
  607.   padding: 5px;
  608.   border-radius: 5px;
  609. }
  610. .sureBtn {
  611.   text-align: right;
  612.   margin-top: 10px;
  613. }
  614. .board {
  615.   position: absolute;
  616.   top: 0;
  617.   left: 0;
  618.   width: 100%;
  619.   height: 100%;
  620.   cursor: pointer;
  621. }
  622. .svgrect {
  623.   stroke: rgb(237, 10, 10);
  624.   stroke-width: 2;
  625.   position: relation;
  626.   fill-opacity: 0;
  627. }
  628. .svgLine {
  629.   position: absolute;
  630.   top: 0;
  631.   left: 0;
  632.   width: 100%;
  633.   height: 100%;
  634.   cursor: pointer;
  635.   z-index: 1;
  636. }
  637.  
  638. .svgRect {
  639.   position: absolute;
  640.   top: 0;
  641.   left: 0;
  642.   width: 100%;
  643.   height: 100%;
  644.   cursor: pointer;
  645.   z-index: 1;
  646. }
  647. .divbox {
  648.   cursor: move;
  649.   border: 1px solid red;
  650.   z-index: 3;
  651.   padding: 5px;
  652.   white-space: nowrap;
  653. }
  654. .movediv {
  655.   position: absolute;
  656.   top: -8px;
  657.   left: -8px;
  658. }
  659. .closediv {
  660.   position: absolute;
  661.   top: -8px;
  662.   right: -8px;
  663.   cursor: pointer;
  664.   background: #f64404;
  665.   color: #fff;
  666.   border-radius: 50%;
  667. }
  668. .choosed-box {
  669.   width: 230px;
  670.   position: absolute;
  671.   top: 93px;
  672.   right: 0;
  673. }
  674.  
  675. .back-box {
  676.   position: absolute;
  677.   top: 93px;
  678.   right: 150px;
  679. }
  680. .choose-line {
  681.   height: 40px;
  682.   display: flex;
  683.   flex-direction: row;
  684.   margin-bottom: 15px;
  685. }
  686. .choose-color,
  687. .writing-box {
  688.   height: 40px;
  689.   display: flex;
  690.   flex-direction: row;
  691.   margin-bottom: 15px;
  692. }
  693.  
  694. .button {
  695.   position: relative;
  696.   transition: all 0.3s ease-in-out;
  697.   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  698.   padding-block: 0.5rem;
  699.   padding-inline: 1.25rem;
  700.   background-color: #1E96E1;
  701.   border-radius: 9999px;
  702.   display: flex;
  703.   align-items: center;
  704.   justify-content: center;
  705.   color: #ffff;
  706.   gap: 10px;
  707.   font-weight: bold;
  708.   border: 3px solid #ffffff4d;
  709.   outline: none;
  710.   overflow: hidden;
  711.   font-size: 15px;
  712. }
  713.  
  714. .icon {
  715.   width: 24px;
  716.   height: 24px;
  717.   transition: all 0.3s ease-in-out;
  718. }
  719.  
  720. .button:hover {
  721.   transform: scale(1.05);
  722.   border-color: #fff9;
  723. }
  724.  
  725. .button:hover .icon {
  726.   transform: translate(4px);
  727. }
  728.  
  729. .button:hover::before {
  730.   animation: shine 1.5s ease-out infinite;
  731. }
  732.  
  733. .button::before {
  734.   content: "";
  735.   position: absolute;
  736.   width: 100px;
  737.   height: 100%;
  738.   background-image: linear-gradient(
  739.     120deg,
  740.     rgba(255, 255, 255, 0) 30%,
  741.     rgba(255, 255, 255, 0.8),
  742.     rgba(255, 255, 255, 0) 70%
  743.   );
  744.   top: 0;
  745.   left: -100px;
  746.   opacity: 0.6;
  747. }
  748.  
  749. @keyframes shine {
  750.   0% {
  751.     left: -100px;
  752.   }
  753.  
  754.   60% {
  755.     left: 100%;
  756.   }
  757.  
  758.   to {
  759.     left: 100%;
  760.   }
  761. }
  762.  
  763. .delete-button {
  764.   background-color: #1E96E1;
  765.   color: #fff;
  766.   font-size: 14px;
  767.   border: 0.5px solid rgba(0, 0, 0, 0.1);
  768.   padding-bottom: 8px;
  769.   width: 60px;
  770.   height: 65px;
  771.   border-radius: 15px 15px 12px 12px;
  772.   cursor: pointer;
  773.   position: relative;
  774.   will-change: transform;
  775.   transition: all .1s ease-in-out 0s;
  776.   user-select: none;
  777.   /* Add gradient shading to each side */
  778.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
  779.     linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  780.   background-position: bottom right, bottom right;
  781.   background-size: 100% 100%, 100% 100%;
  782.   background-repeat: no-repeat;
  783.   box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
  784.     inset -4px -8px 0px rgba(0, 0, 0, 0.3),
  785.     0px 2px 1px rgba(0, 0, 0, 0.3),
  786.     0px 2px 1px rgba(255, 255, 255, 0.1);
  787.   transform: perspective(70px) rotateX(5deg) rotateY(0deg);
  788. }
  789.  
  790. .delete-button::after {
  791.   content: '';
  792.   position: absolute;
  793.   top: 0;
  794.   bottom: 0;
  795.   left: 0;
  796.   right: 0;
  797.   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));
  798.   z-index: -1;
  799.   border-radius: 15px;
  800.   box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),
  801.     inset 4px -8px 0px rgba(0, 0, 0, 0.3);
  802.   transition: all .1s ease-in-out 0s;
  803. }
  804.  
  805. .delete-button::before {
  806.   content: '';
  807.   position: absolute;
  808.   top: 0;
  809.   bottom: 0;
  810.   left: 0;
  811.   right: 0;
  812.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
  813.     linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  814.   background-position: bottom right, bottom right;
  815.   background-size: 100% 100%, 100% 100%;
  816.   background-repeat: no-repeat;
  817.   z-index: -1;
  818.   border-radius: 15px;
  819.   transition: all .1s ease-in-out 0s;
  820. }
  821.  
  822. .delete-button:active {
  823.   will-change: transform;
  824.   transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);
  825.   height: 64px;
  826.   border: 0.25px solid rgba(0, 0, 0, 0.2);
  827.   box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),
  828.     inset -4px -6px 0px rgba(0, 0, 0, 0.8),
  829.     0px 1px 0px rgba(0, 0, 0, 0.9),
  830.     0px 1px 0px rgba(255, 255, 255, 0.2);
  831.   transition: all .1s ease-in-out 0s;
  832. }
  833.  
  834. .delete-button::after:active {
  835.   background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));
  836. }
  837.  
  838. .delete-button:active::before {
  839.   content: "";
  840.   display: block;
  841.   position: absolute;
  842.   top: 5%;
  843.   left: 20%;
  844.   width: 50%;
  845.   height: 80%;
  846.   background-color: rgba(255, 255, 255, 0.1);
  847.   animation: overlay 0.1s ease-in-out 0s;
  848.   pointer-events: none;
  849. }
  850.  
  851. @keyframes overlay {
  852.   from {
  853.     opacity: 0;
  854.   }
  855.  
  856.   to {
  857.     opacity: 1;
  858.   }
  859. }
  860.  
  861. .delete-button:focus {
  862.   outline: none;
  863. }
  864.  
  865. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/903208
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号