PDF 生成模板编辑器
开源可视化 PDF 生成引擎,支持自定义模板,并提供面向开发者的 API,灵活构建文档生成流程。
PDF 的创建方式是每种颜色都基于自己的 “分色” 。每个分色都是指在物理打印文档时将使用的特定油墨或过程。
WebViewer 能够从这些分离中提取信息,还可以禁用/启用它们。
调用文档的 enableColorSeparations 启用分色。分色初始化后,WebViewer 将获取分色并通过 colorSeparationAdded 事件传递数据,也可以使用 getColorSeparations 获取全部分色。
获取到分色后,您可以使用 enableSeparation 禁用或启用它,传入分色的 name 和是否启用。之后调用 refreshAll 重新绘制页面。
以下是分色 API 的示例:
const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
path: '/',
initialDoc: 'Your PDF Url',
licenseKey: 'Input your license here'
}, viewer).then((instance) => {
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', async () => {
console.log('ComPDFKit Web Demo loaded');
const doc = documentViewer.getDocument();
// 每个分色通过 `colorSeparationAdded` 事件传递。
doc.addEventListener('colorSeparationAdded', (separation) => {
console.log(separation.name);
});
// 启用分色。
await doc.enableColorSeparations();
const colorList = doc.getColorSeparations();
// 禁用前两个色值。
doc.enableSeparation(colorList[0].name, false);
doc.enableSeparation(colorList[1].name, false);
// 启用第一个色值。
doc.enableSeparation(colorList[0].name, true);
// 重新绘制页面。
documentViewer.refreshAll();
});
});您还可以使用 getColorSeparationsAtPoint API 获取文档上某个点的分色列表。
在此示例中,我们将使用 mouseMove 事件获取用户鼠标下的分色列表。坐标的转换可参考页面相关 - 坐标
ComPDFKitViewer(...).then((instance) => {
const { documentViewer } = instance.Core;
const handleMouseMove = async (e) => {
// 鼠标下的页码和页面坐标。
const { pageNumber, x, y } = documentViewer.getViewerCoordinatesFromMouseEvent(e);
const results = await documentViewer.getColorSeparationsAtPoint(pageNumber, x, y);
/***
results = [
{
name: 'separation name',
value: 'percentage of color at that point'
},
...
]
***/
};
documentViewer.addEventListener('documentLoaded', async () => {
console.log('ComPDFKit Web Demo loaded');
// 启用分色。
await documentViewer.getDocument().enableColorSeparations();
documentViewer.addEventListener('mouseMove', handleMouseMove);
});
});