Skip to content

PDF 生成模板编辑器

开源可视化 PDF 生成引擎,支持自定义模板,并提供面向开发者的 API,灵活构建文档生成流程。

查看 GitHub

获取或设置内容框 ​

可以通过以下接口获取或设置内容框。

获取内容框列表:

javascript
const contentBoxesList = await documentViewer.getContentEditManager().loadContentBoxes(1) // 第一页的内容框。

然后即可获取或设置内容框的属性或内容:

javascript
const box = contentBoxesList.find(contentBox => contentBox.type === ContentEdit.Types.TEXT)

// 获取内容框的矩形区域
const rect = box.getBoxAttributes().rect

// 获取内容框的内容
const text = await ContentEdit.getContent(box)

// 在指定下标处插入文字
const editor = await box.startContentEditing()
await editor.setSelection(index)
await editor.type('Test')

// 按起止下标替换文字
// start、end:要替换的文字的起始与结束字符下标
// 文本中的段落以 \n 分隔,插入文字时可用 \n 换行
const start = 3
const end = 6
await editor.setSelection(start, end)
await editor.type('Test')

// 替换内容框的全部文字
await ContentEdit.setContent(box, 'Test')

// 在内容框末尾添加文字
const textEditor = await box.startContentEditing()
await textEditor.setSelection(textEditor.getText().length)
await textEditor.type('Test')

const imageBox = contentBoxesList.find(contentBox => contentBox.type === ContentEdit.Types.OBJECT)
const imageEditor = await imageBox.startContentEditing()

// 替换为新图片
await imageEditor.replaceImage(imageBase64)

// 获取图片数据
await imageEditor.extractImage()