如何在 PDFJS 查看器中启用注释答案

【问题标题】：How to enable annotation in PDFJS viewer如何在 PDFJS 查看器中启用注释
【发布时间】：2021-12-06 12:54:18
【问题描述】：

我正在使用 PDFJS 和查看器。但是，我确实有一个问题，即注释没有正确显示，就像 pdfs 演示查看器 https://mozilla.github.io/pdf.js/web/viewer.html 中的那样。

注释在 pdf 演示查看器中正确显示：

现在它使用 Chrome 显示在我的应用程序中：

这是使用我的应用程序在 Safari 中显示的方式：

这是我现在初始化 pdfs 查看器：

function initPdfjs() {
    // Enable hyperlinks within PDF files.
    pdfLinkService = new (pdfjsViewer as any).PDFLinkService({
        eventBus,
    });

    // Enable find controller.
    pdfFindController = new (pdfjsViewer as any).PDFFindController({
        eventBus,
        linkService: pdfLinkService,
    });

    const container = document.getElementById('viewerContainer');
    if (container) {
        // Initialize PDFViewer
        pdfViewer = new (pdfjsViewer as any).PDFViewer({
            eventBus,
            container,
            removePageBorders: true,
            linkService: pdfLinkService,
            findController: pdfFindController,
        });
        // pdfViewer.textLayerMode = Utils.enableTextSelection() ? TextLayerMode.ENABLE : TextLayerMode.DISABLE;
        pdfViewer.textLayerMode = TextLayerMode.ENABLE_ENHANCE;

        // See https://github.com/mozilla/pdf.js/issues/11245
        if (Utils.isIos()) {
            pdfViewer.maxCanvasPixels = 4000 * 4000;
        }

        pdfLinkService.setViewer(pdfViewer);
        return;
    } else {
        console.error(`getElementById('viewerContainer') failed`);
    }
}

我需要做什么才能让注释在我的应用中正确显示？

【问题讨论】：

标签： pdfjs pdfjs-dist

【解决方案1】：

我让它工作了。我不知道这是否正确，但我发布它以防有人使用它。

首先，我设置 webpack 以将内容从 ./node_modules/pdfjs-dist/web/images 复制到我的 dist 文件夹，以便包含图像。这解决了除 {{date}}、{{time}} 之外的所有显示错误。

    new CopyPlugin({
        patterns: [
            { from: './node_modules/pdfjs-dist/web/images', to: '' },
            { from: './l10n', to: 'l10n' },
        ],
    }),

为了解决 {{date}}, {{time}} 问题，我设置了本地化服务。我通过将文件 ng2-pdfjs-viewer-master/pdfjs/web/locale/en-US/viewer.properties 复制到我的项目中的 ./l10n/local.properties 来做到这一点。然后通过上面的 webpack 插件将其复制到 dist 文件夹中。然后我通过添加以下代码在我的 pdfjs 中设置 l10n 服务：

// initialize localization service, so time stamp in embedded comments are shown correctly
l10n = new (pdfjsViewer as any).GenericL10n('en-US');
const dir = await l10n.getDirection();
document.getElementsByTagName('html')[0].dir = dir;

并将 l10n 添加到 PDFViewer 初始化中：

// Initialize PDFViewer
pdfViewer = new (pdfjsViewer as any).PDFViewer({
    eventBus,
    container,
    removePageBorders: true,
    linkService: pdfLinkService,
    findController: pdfFindController,
    l10n,
});

现在注释显示正确：

我觉得有点奇怪的是日期格式。我使用 en-US 作为语言环境，所以我希望它是 mm/dd/yyyy（美国方式），但它是 dd/mm/yyyy（就像丹麦人更喜欢它一样）。我试图在我的 Mac 上的日期设置和 Chrome 中的语言设置上鬼混，但它看起来没有任何效果，所以如果美国客户抱怨我不知道该怎么办。

【讨论】：