PDF.js 获取 AcroForm 元素位置/尺寸答案

【问题标题】：PDF.js get AcroForm element positions/dimensionsPDF.js 获取 AcroForm 元素位置/尺寸
【发布时间】：2015-05-02 22:56:28
【问题描述】：

我正在尝试解析 PDF 文档，结果很好。 PDF 在 Adobe FormCentral 中创建，并包含一个表单元素（日期字段）。

头：

<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="common.js"></script>
<script type="text/javascript" charset="utf-8" src="pdfjs/build/pdf.js"></script>
<script type="text/javascript" charset="utf-8" src="mscripts.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        loadPDFJS();
    });
</script>

正文：

<div id="viewer"></div>

js:

function loadPDFJS(){
    var canvasContainer = document.getElementById('viewer');
    PDFJS.workerSrc = 'build/pdf.worker.js';

    PDFJS.getDocument('mpdf.pdf').then(function(pdf) {
        pdf.getPage(1).then(renderPage);

        function renderPage(page) {
            console.log(page);
            var xyz = window.getComputedStyle(canvasContainer);
            var w = parseInt(xyz.width.replace("px", ""));

            var viewport = page.getViewport(1);
            var scale = w / viewport.width;
            var scaledViewport = page.getViewport(scale);

            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = scaledViewport.height;
            canvas.width = scaledViewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: scaledViewport
            };
            page.render(renderContext).then(function () {
                document.getElementById('viewer').appendChild(canvas);
            });
        }
    });
}

这段代码确实呈现了 PDF。但问题来了。我需要知道元素的尺寸和位置（在这种情况下，只有一个）。我查看了 PDF.js github 页面上的演示，并记录了页面对象。在包含文本的 PDF 文档中，我注意到记录的 PDFPage 包含文本（但是我无法提取任何尺寸），但表单元素似乎没有被解析。也许他们是背景的一部分？

我只能找到一个用于访问这些 AcroForm 字段的 Java 库 here，但我宁愿只使用一个库（最好是 PDF.js）

问题：如何使用 PDF.js 检索 PDF 文档中所有表单元素的位置和尺寸？

【问题讨论】：

标签： javascript html pdf pdf.js

【解决方案1】：

老问题，但对于那些最终来到这里的人来说，它值得一个答案：

page.getAnnotations().then(function(items) {
    console.log(items);
});

Items 应该是一个数组，并且每个元素都应该有一个矩形。还有一个 PDF.js 的 fork（fork），它扩展了功能以包含表单字段以允许用户从 PDF 渲染中输入：

https://github.com/EvilTrev/pdf.js

【讨论】：