正文

用VUE3做个PDF动态合同表单（含编辑+渲染）

admin
admin V管理员 /0 评论 /72 阅读
0815
此篇文章发布距今已超过35天，您需要注意文章的内容或图片是否可用！

最终产物

嗯直接看仓库好点，我写文章不行，当个乐子看就行。pdf-signature: VUE版本的PDF合同电子签（含生成端+渲染端）。可实现预定义表单，前端填写业务数据后发送后端进行生成PDF。(gitee.com)希望能帮助到你，如果觉得可以，请留个印记。

渲染端

生成端

灵感来源

因为工作需要，在写合同生成的时候字段太多了，因为没有UI所以构思不出来。

刚开始是使用纯表单（「先用Adobe Acrobat构建PDF预定义表单」，后端按照预定义表单去写入），结果写完太乱了，不清晰且无法直观的对应合同模版。无意中看见泛微OA的合同电子签（逼格就上来了）:

于是乎我就去看了泛微是怎么实现的，发现他是一页PDF是一张图片然后做过ul 然后每个页面就是一个li做定位容器，然后 固定图片大小 请求模版后得到字段参数定位渲染到页面上。

这种方式具体是不是有用到别的处理逻辑不清楚，但是让我一个个去找定位参数还不如让我死（几十个合同模版）。然后我就想能不能读取PDF里面的预定义「表单字段属性（定位信息啥的）」 将其渲染到页面上。后面用Adobe Acrobat看了一下有定位信息（「这里有坑」）

嗯有位置信息就好办，想办法找库读取出预定义表单信息就行。一番查找最终选用pdfjs-dist 可以实现读取 主要使用读取方法

const page = await pagePDfDoc.getPage(pageNum)
const viewport = page.getViewport({ scale: currentScale.value })
const annotations = await page.getAnnotations() //getAnnotations 可以读取到预定义表单信息数组

其中 rect [135.089, 746.562, 265.169, 767.255] 完全对应上了上面截图的定位信息，那么按着之前的思路走，先绘制pdf，然后按照定位绘制一个矩形上去。

绘制渲染

这里直接看代码吧，整体不难照着文档走就行

<template>
  <div class="_container" ref="conteainerRef">
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'

GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.mjs'

const currentPage = ref(1) // 渲染那一页
const pdfURL = ref<string>('/pdfs/example.pdf') // 自持base64 + url

const pdfDoc = ref<any>(null)
let pagePDfDoc: any
const loadPdf = async () => {
  try {
    const loadingTask = getDocument(pdfURL.value)
    const pageObject = await loadingTask.promise
    pdfDoc.value = pageObject

    if (!pdfDoc.value) {
      throw new Error('PDF文档加载错误')
    }
    pagePDfDoc = pageObject
    pageNumbs.value = await pdfDoc.value.numPages
    emits('loadPdf', pageNumbs.value)
    console.log(`PDF 加载: ${pageNumbs.value} 页`)
  } catch (error) {
    console.error('加载PDF失败:', error)
  }
}

const renderPdf = async (pageNum = 1) => {
  try {
    const page = await pagePDfDoc.getPage(pageNum)
    const canvas = pdfCanvas.value!
    const ctx = canvas.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1
    const ratio = dpr / bsr
    ratioGlobal.value = ratio
    const viewport = page.getViewport({ scale: currentScale.value * 2 })
    canvas.width = viewport.width * ratio
    canvas.height = viewport.height * ratio
    canvas.style.width = viewport.width + 'px'
    pdf_div_width.value = viewport.width + 'px'
    conteainerRef.value!.style.width = viewport.width + 'px'
    conteainerRef.value!.style.height = viewport.height + 'px'

    canvas.style.height = viewport.height + 'px'
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
    const renderContext = {
      canvasContext: ctx,
      viewport: viewport
    }
    await page.render(renderContext).promise
  } catch (error) {
    console.error(`渲染报错 ${pageNum}: ${error}`)
  }
}

onMounted(() => {
  loadPdf().then(() => {
    renderPdf(currentPage.value) // 默认渲染第一页
  })
})

读取字段定位渲染（关注点）

这里有很大的坑，做的时候折磨了一下午，快下班了才发现原因。因为读出来的定位信息完全没有参考，canvas 的坐标是左上角0,0开始的。读出来的y坐标很明显不对，都到底部了700多，后面才发现「PDF的坐标起点是从左下角开始」😂。

<template>
  <div class="_container" ref="conteainerRef">
    <canvas ref="pdfCanvas"></canvas>
    <div class="filed_container" v-for="field in fields" :id="`point_${field.name}`" :key="field.name"
      :style="fieldStyle(field)" @click="focusField(field)">
      <span>{{ field.name }}</span>
    </div>
    <!-- 右侧悬浮表单 -->
    <div class="form_container" ref="formContainerRef"> </div>
  </div>
</template>

const extractFields = async (pageNum: any) => {
  if (!pagePDfDoc) {
    console.error('PDF对象不存在.')
    return
  }

  fields.splice(0, fields.length) // 清空现有字段数据

  try {
    const page = await pagePDfDoc.getPage(pageNum)
    const viewport = page.getViewport({ scale: currentScale.value })
    const annotations = await page.getAnnotations()
    console.log('annotations', annotations)
    const _scale = currentScale.value * 2

    // 转换canvas坐标
    function convertToCanvasCoordinates(
      pdfX: number,
      pdfY: number,
      pageHeight: number,
      scale: number
    ) {
      const adjustedPdfY = pageHeight - pdfY // 将 PDF 坐标系转换为 canvas 坐标系
      const canvasX = pdfX * scale
      const canvasY = adjustedPdfY * scale
      return { x: canvasX, y: canvasY }
    }

    annotations.forEach((annot: any) => {
      if (annot.subtype === 'Widget' && annot.fieldName && annot.fieldType === 'Tx') {
        const { x, y } = convertToCanvasCoordinates(
          annot.rect[0],
          annot.rect[1],
          viewport.height,
          _scale
        )
        fields.push({
          name: annot.fieldName,
          type: annot.fieldType,
          x,
          y,
          width: (annot.rect[2] - annot.rect[0]) * _scale,
          height: (annot.rect[3] - annot.rect[1]) * _scale
        })

        // 在 form_container 中追加表单
        generateForm(annot)
      }
    })
  } catch (error) {
    console.error(`字段提取失败 ${pageNum}: ${error}`)
  }
}

// @ts-ignore
const generateForm = (annot: { fieldName: string;[key: string]: any }) => {
  const form = document.createElement('div')
  form.id = `field_${annot.fieldName}`
  const label = document.createElement('label')
  const input = document.createElement('input')


  /**  Input反向联动表单滚动  */
  input.addEventListener('click', (e) => {
    e.preventDefault()
    e.stopPropagation()

    const pointItem = document.getElementById(`point_${annot.fieldName}`)
    if (pointItem) {
      activeFiled.value = annot.fieldName
      pointItem?.focus()
      pointItem.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'center' })
    }
  })


  input.id = `input_${annot.fieldName}`
  input.type = 'text'
  input.style.backgroundColor = 'transparent'
  input.style.border = '1px solid #e2e2e2'
  label.innerText = annot.fieldName
  label.style.color = 'red'
  form.appendChild(label)
  form.appendChild(input)
  formContainerRef.value!.appendChild(form)
}

这里具体代码请查看Git仓库 pdf-signature (gitee.com) 不太好抽离，代码不多。

生成端思路

后面又想到前端做模版 然后做个表单Schema生成器进行关联业务组件，这样后端只需要关注写入字段即可。最终思路：

  1. 先渲染pdf作为背景，然后叠加一层canvas在背景上
  2. 在画板canvas上绘制出表单矩形区域，然后将所有数据传递给后端进行生成PDF预定义表单

这里后端采用pdf-lib库进行生成，前端传递数据需要进行坐标转换回去（「要考虑缩放+坐标颠倒」）

<template>
  <div>
    <button @click="handleSendGenerate">生成</button>
  </div>
  <div class="_container" ref="containerRef" style="position: relative;">
    <canvas ref="pdfCanvas" style="width: 100%; height: 100%;"></canvas>
    <canvas ref="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index:999;"
      @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing"></canvas>
  </div>
</template>
const handleSendGenerate = async () => {
  const pdfPageWidth = pageWidthVal.value;  // PDF 页面原始的宽度
  const pdfPageHeight = pageHeightVal.value;  // PDF 页面原始的高度
  const scaleRatioX = pdfPageWidth / overlayCanvas.value!.offsetWidth;
  const scaleRatioY = pdfPageHeight / overlayCanvas.value!.offsetHeight;

  const scaledRectangles = rectangles.map(rect => ({
    x: rect.x * scaleRatioX,
    y: (overlayCanvas.value!.offsetHeight - rect.y - rect.height) * scaleRatioY, // 转换为 PDF 坐标系
    width: rect.width * scaleRatioX,
    height: rect.height * scaleRatioY,
    fieldName: rect.fieldName
  }));

  fetch('/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      rectangles: scaledRectangles,
    })
  }).then(res => res.json()).then(data => {
    console.log(data)
  })
}

后端代码

import { Hono } from 'hono'
import { logger } from 'hono/logger'
import { PDFDocument, rgb } from 'pdf-lib'
import fs from 'node:fs'
import path from 'node:path'

const app = new Hono()

app.use('*', logger())

app.post('/api/generate', async (c) => {
  const { rectangles } = await c.req.json();
  try {
    const pdfBuffer = fs.readFileSync(path.join(__dirname, 'public/example.pdf'));
    const pdfDoc = await PDFDocument.load(pdfBuffer);
    const page = pdfDoc.getPages()[0];
    const { height: pdfHeight } = page.getSize();

    const form = pdfDoc.getForm();

    rectangles.forEach((rect: any) => {
      // 确保坐标和尺寸已经按比例缩放
      const adjustedY = pdfHeight - rect.y - rect.height;

      const field = form.createTextField(rect.fieldName);
      field.addToPage(page, {
        x: rect.x,  // 使用缩放后的X坐标
        y: rect.y,  // 使用调整后的Y坐标
        width: rect.width,  // 使用缩放后的宽度
        height: rect.height,  // 使用缩放后的高度
        backgroundColor: rgb(0.95, 0.95, 0.95),
        borderColor: rgb(1, 1, 1),
        borderWidth: 1
      });
    });

    const modifiedPdfBytes = await pdfDoc.save();
    fs.writeFileSync(path.join(__dirname, 'public/modified.pdf'), modifiedPdfBytes);
    // 返回生成的PDF文件 弄成URL返回


    return c.json({ message: 'PDF modified successfully' });
  } catch (error) {
    console.error('Error processing PDF:', error);
    c.status(500);
    return c.json({ error: 'Internal Server Error' });
  }
})

console.log("Server running at http://localhost:3001")

export default {
  port: 3001,
  fetch: app.fetch,
}


推荐站内搜索：最好用的开发软件、免费开源系统、渗透测试工具云盘下载、最新渗透测试资料、最新黑客工具下载……
宙飒天下网