PDFTron 中的自定义元素

Question

我正在尝试添加复选框，上面写着：“启用快照：[]”。如果用户单击该复选框，我想检查该复选框是否已选中。但我收到如下错误：document.getElementById(...) is null.

代码如下：

instance.setHeaderItems(header => {
    header.getHeader('toolbarGroup-Annotate').unshift({
        type: 'customElement',
        render: function() {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.name = 'snap-to-grid';
            checkbox.value = '1';
            checkbox.id = 'snap-to-grid';
            checkbox.onclick = function(evt) {
                alert(document.getElementById('snap-to-grid').checked);
            };
            return checkbox;
        }
    });
});

那么有没有办法知道复选框是否被选中？另外，如何在复选框前添加一些文本？

Answer 1

WebViewer 运行在您页面的 iframe 中。当我们呈现这些自定义按钮时，它们也在 iframe 中。要访问您案例中的元素，您首先需要获取 iframe 的文档。这应该适合你

instance.setHeaderItems(header => {
    header.getHeader('toolbarGroup-Annotate').unshift({
      type: 'customElement',
      render: function() {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'snap-to-grid';
        checkbox.value = '1';
        checkbox.id = 'snap-to-grid';
        checkbox.onclick = function(evt) {
          alert(instance.iframeWindow.document.getElementById('snap-to-grid').checked);
        };
        return checkbox;
      }
    });
  });

PDFTron 中的自定义元素

customElement in PDFTron

javascript

pdftron