Skip to content

PDF 生成模板编辑器

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

查看 GitHub

PDF 分色 ​

PDF 的创建方式是每种颜色都基于自己的 “分色” 。每个分色都是指在物理打印文档时将使用的特定油墨或过程。

WebViewer 能够从这些分离中提取信息,还可以禁用/启用它们。

API ​

调用文档的 enableColorSeparations 启用分色。分色初始化后,WebViewer 将获取分色并通过 colorSeparationAdded 事件传递数据,也可以使用 getColorSeparations 获取全部分色。

获取到分色后,您可以使用 enableSeparation 禁用或启用它,传入分色的 name 和是否启用。之后调用 refreshAll 重新绘制页面。

以下是分色 API 的示例:

javascript
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 事件获取用户鼠标下的分色列表。坐标的转换可参考页面相关 - 坐标

javascript
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);
  });
});