调制组件

用于显示Docling输出的Web组件,它简化了文档处理,解析了多种格式——包括高级PDF理解. 此软件包需要 JSON 输出转换为 调试。从 互动实例。 。 。 .

安装软件包

如果客户端或单页应用程序被捆绑在前面:

npm i @docling/docling-components

下一步, 导入应用程序根上的软件包以安装组件 :

import '@docling/docling-components';

如果一个静态或服务器侧实现的网站; 将软件包添加到页面 HTML 中 . 要么下载该软件包并将其作为其他网站的一部分,要么使用国家预防机制的CDN镜像:

<html>
  <head>
    ...

    <script
      type="module"
      src="https://unpkg.com/@docling/docling-components/dist/index.es.js"
    />
  </head>

  ...
</html>

文件组件

标记-img

此组件通过显示在转换 JSON 中嵌入的完整页面渲染(用于特定的输入文档格式),在被转换的文档上下文中显示被转换的文档. 每个文档项目在页面上方显示为边框.

专有用途

类似 <img> 您可以将组件指向 Docling JSON 文件.

<docling-img src="conversion.json"></docling-img>

或按程序加载文档 :

<script type="module">
  const cmp = document.getElementById('cmp');

  const fetched = await fetch('conversion.json');
  const doc = await fetched.json();
  cmp.src = doc;
</script>
...
<docling-img id="cmp" pagenumbers></docling-img>

项目过滤和突出显示

根据已转换文档中的引用路径将已标记的文档项目缩小:

<docling-img src="conversion.json" items="#/pictures/3"></docling-img>

选择整个项目类别 items="#/pictures",完整页与 items="#/pages/2",与 items="#/pictures, #/tables"。 。 。 .

或在方案上选择特定项目:

<script type="module">
  const cmp = document.getElementById('cmp');
  const fetched = await fetch('conversion.json');
  const doc = await fetched.json();
  cmp.src = doc;

  // Select the first three tables.
  cmp.items = doc.tables.slice(0, 3);
</script>
...
<docling-img id="cmp" pagenumbers></docling-img>

要强调项目选择, 您可以将未选取的内容压入页面背景并/或剪切出页面, 无需选择任何项目 :

<docling-img
  src="conversion.json"
  items="#/pictures"
  trim="pages"
  backdrop
></docling-img>

工具提示

当你在页面上徘徊时,会弹出一个工具提示。 如果有匹配的网络组件, 此工具提示会显示项目解析的内容和说明 :

<docling-img src="conversion.json">
  <docling-tooltip></docling-tooltip>
</docling-img>

重叠

将内容和说明直接解析到项目上方(可能包含这些项目).

<docling-img src="conversion.json">
  <docling-overlay></docling-overlay>
</docling-img>

登记表

此组件将转换后的文档显示为已解析的文档项目表,包含项目内容的列和已解析文档的图像(如果有的话).

专有用途

<docling-table src="conversion.json"></docling-table>

您可以选择带有 items 属性,如描述 docling-img 组件。 选择项目将从视图中剪切所有未选中的项目 .

配置列

选择要显示的列和顺序 :

<docling-table src="conversion.json">
  <docling-column>
    <docling-item-text></docling-item-text>
    <docling-item-table></docling-item-table>
  </docling-column>
  <docling-column>
    <docling-item-provenance></docling-item-provenance>
  </docling-column>
</docling-table>

您也可以使用它来显示单个文档项目的剪接图像 :

<docling-table src="conversion.json" items="#/tables/2">
  <docling-column>
    <docling-item-provenance></docling-item-provenance>
  </docling-column>
</docling-table>

项目构成部分

大多数类型的文档项目都有一个预先包装的组件,用于可视化:

您可以直接使用这些标签, 其元素有: <docling-tooltip> 指定将使用哪些组件,包括可选参数。 例如,只显示表格组件的工具提示:

<docling-tooltip>
  <docling-item-table></docling-item-table>
</docling-tooltip>

您可以通过从 : DoclingItemElement 学习时间 /src/item/ItemElement.ts 并且以教诲示人 @customDoclingItemElement('docling-my-first-item-component') 使其既注册为自定义网络元素,又注册为渲染文档项目的默认组件.

注释组件

某些类型的文档项目注释有一个预先包装的组件,用于可视化:

您可以直接使用这些标签, 其元素有: <docling-tooltip> 指定将使用哪些组件。 例如,如果有的话,用其分类来覆盖图片:

<docling-overlay>
  <docling-picture-classification></docling-picture-classification>
</docling-overlay>

通过从 DoclingAnnotationElement 学习时间 /src/annotation/AnnotationElement.ts 并且以教诲示人 @customDoclingAnnotationElement('docling-my-first-annotation-component') 使其既注册为自定义网络元素,又注册为提供文档说明的默认组件.