vue3 pdf文件预览中 在pdf某个位置动态添加输入框

在Vue3中，要在PDF文件预览中动态地在特定位置添加输入框，通常会结合第三方库如vue-pdf-viewer或jsPDF等来处理PDF展示，并利用HTML5的`contenteditable`属性或者类似`vue-html5-editor`这样的富文本编辑器插件来实现在PDF上交互式编辑。

步骤大致如下：

1. 引入必要的库：安装并引入Vue PDF Viewer (`@chenjia/vue-pdf-viewer`) 和富文本编辑器插件（例如 `vue-html5-editor`）。

npm install @chenjia/vue-pdf-viewer vue-html5-editor --save

2. 在模板中设置PDF预览，并监听PDF页面事件，以便在指定位置插入编辑区域：

<template>
  <div>
    <vue-pdf-viewer ref="pdfViewer" :src="pdfSrc" />
    <div v-if="showEditor">
      <vue-html5-editor v-model="inputContent" position="{{ editorPosition }}" />
    </div>
  </div>
</template>

<script>
import VuePdfViewer from '@chenjia/vue-pdf-viewer';
import VueHtml5Editor from 'vue-html5-editor';

export default {
  components: {
    VuePdfViewer,
    VueHtml5Editor,
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      showEditor: false,
      editorPosition: { x: 100, y: 200 }, // 预设编辑框初始位置
      inputContent: '',
    };
  },
  methods: {
    handleMarkerClick(position) {
      this.showEditor = true;
      this.editorPosition = position; // 根据点击的位置更新编辑框位置
    },
  },
};
</script>

3. 当需要在PDF上添加输入框时，通过监听PDF viewer的标记（marker）点击事件，当用户点击某个位置时，显示编辑框并定位到该位置。

4. 编辑完成后，可以将用户的输入内容同步回服务器或做其他处理。