pdfjs - 如何在 PDFJS 查看器中启用注释
问题描述
我正在使用 PDFJS 和查看器。但是,我确实遇到了注释未正确显示的问题,就像 pdfs 演示查看器https://mozilla.github.io/pdf.js/web/viewer.html中的那样。
注释正确显示在 pdfs 演示查看器中:
现在它使用 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`);
}
}
为了让注释在我的应用程序中正确显示,我需要做什么?
解决方案
我让它工作了。我不知道这是否正确,但我发布它以防有人可以使用它。
首先,我设置 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 中的语言设置上鬼混,但它看起来没有任何效果,所以如果美国客户抱怨我不知道该怎么办。
推荐阅读
- magento - 在 Magento 市场上添加扩展
- c# - 在保持顺序的同时将 NN 组中的项目分组
- java - 如何为 Eclipse PMD 插件添加自定义 Java 规则?
- mongodb - 在 Nestjs Mongoose 中等待更新/删除
- windows - How to print the list of files in a folder from build logs in make file?
- azure - Azure 管道 - terratest - 错误:请运行“az login”来设置帐户
- javascript - 如何将我的二维码下载到 png 文件 react/js
- python - 如何根据特定要求比较两个列表?
- entity-framework - 问题:EF Core 3.1 为使用 Ado.Net 更新的 Tables 列提供了不正确的值
- javascript - 从一个 Javascript 函数添加多个表