引言

在数字化时代，PDF文件已成为信息传递的重要媒介。然而，传统的PDF阅读体验往往缺乏交互性和批注功能。为了解决这一问题，我们推出了一款强大的PDF批注工具——elasticpdf。本文将详细介绍如何将elasticpdf集成到jQuery和HTML项目中，并通过生动的示例代码展示其强大的功能。

一、代码包与Demo概览

elasticpdf基于开源的pdf.js，增加了多种开箱即用的PDF批注功能。其代码包结构简洁明了，易于集成到任何支持JavaScript、HTML和CSS的项目环境中。

1.1 代码包结构

ElasticPDF的代码包延续了pdf.js-dist的独立且完全离线的风格，仅增加了用于支持批注的离线JavaScript代码。

1.2 在线Demo

根据不同的功能及预算需求，我们提供了两个版本的产品Demo：

• 批注合成版：[demos.libertynlp.com/# /pdfjs-ann](demos.libertynlp.com/# /pdfjs-ann)
• 专业批注版：www.elasticpdf.com/demo

二、移动至目标项目

将elasticpdf代码包移动到你的jQuery或HTML项目的任意位置，推荐放置在顶层文件夹。

三、导入目标文件

通过<iframe>导入elasticpdf代码包中的viewer.html文件，并调用初始化函数。注意路径不要写错。

<iframe id='pdfjs-iframe' src="elasticpdf/web/viewer.html" frameborder="0" width="100%" height="770px"></iframe>
<script>
    var elasticpdf_viewer = document.getElementById('pdfjs-iframe').contentWindow;
    window.onload = function() {
        elasticpdf_viewer.initialApp({
            'language': 'en',
            'view_model': {
                'read_only': false,
                'show_annotation': true,
                'show_annotation_list': true,
                'watermark': {
                    'activate': false,
                    'watermark_text': 'elasticpdf'
                },
                'theme': 'light'
            },
            'pdf_url': 'https://app.elasticpdf.com/web/tutorial.pdf',
            'edit_others_annotation': true,
            'member_info': {
                'member_id': 'elasticpdf_id',
                'member_name': 'elasticpdf_name'
            }
        });
    };
</script>

四、导出PDF及批注数据

批注数据的保存有两种方式：

4.1 方式一：批注写入PDF

将批注写入到PDF中然后下载整个文档。这种方式无需后端服务支持。

4.2 方式二：批注单独保存

将批注文件导出为JSON文件，传输并保存于服务器，之后加载回显后可继续编辑批注。

window.addEventListener('message', (e) => {
    if (e.data.source !== 'elasticpdf') {
        return;
    }
    if (e.data.function_name === 'annotationsModified') {
        let this_data = elasticpdf_viewer.pdfAnnotation.outputAnnotations();
        let annotation_content = JSON.stringify(this_data['file_annotation']);
        let file_name = this_data['file_name'];
        postService('upload-annotation-data', {
            'file_name': file_name,
            'file_id': '123ddasfsdffads',
            'file_annotation': annotation_content
        });
    }
});

五、重载PDF及批注数据

在单独将PDF批注保存至服务器的场景中，可以在加载PDF文件后再次从服务器中下载批注并且重载回显到PDF上继续编辑。

window.addEventListener('message', (e) => {
    if (e.data.source !== 'elasticpdf') {
        return;
    }
    if (e.data.function_name === 'pdfLoaded') {
        let file_name = 'tutorial.pdf';
        let annotation_content = await postService('get-annotation-data', {
            'file_name': 'tutorial.pdf',
            'file_id': '123ddasfsdffads'
        });
        elasticpdf_viewer.setPureFileAnnotation({
            'file_annotation': annotation_content
        });
    }
});

六、与后端服务器进行网络通信

所有与服务器的通信都需要网络请求函数来实现。以下是一个简单的PHP示例：

<?php
function postService($url, $data) {
    $new_data = new URLSearchParams();
    $encrpte_data = $data;
    $new_data.append('data', $encrpte_data);
    $base_url = "your-server-url";
    $posturl = $base_url . $url;
    $response = file_get_contents($posturl, false);
    $resp = json_decode($response, true);
    $resp['data'] = json_decode(json_encode($resp['data']));
    return $resp;
}
?>

结语

至此，elasticpdf项目集成于jQuery和HTML项目的代码就介绍完了。完整的示例文件代码可以在官网查看。如有其他应用场景需求欢迎联系我们，我们将为您提供示例代码。本项目也可以轻松集成到Vue、React、Angular、Nuxt.js、WordPress、Svelte、Vite、Android、Electron、ASP.NET、Blazor、PHP、Laravel、PWA、Flutter等项目中，欢迎查看本站相关博客。