集成 pdf.js 批注方案至 jQuery 和 HTML 项目示例代码

摘要： 简单 5 步完成强大的PDF批注开发包集成部署，包括数据的云端同步。本文章介绍如何集成于 jQuery 和 HTML 项目，示例代码完善且简单，复制粘贴即可完成项目的集成。 即使不使用文中产品，其他基于 pdf.js 开发的批注工具也可参考本文集成。

1. 代码包与 Demo

1.1 代码包结构

ElasticPDF基于开源pdf.js，增加了多种开箱即用的 PDF 批注功能。代码包延续了 pdf.js-dist 独立且完全离线的结构风格，仅增加了用于支持批注的离线 Javascript 代码，可以快速完美集成到任何可以运行Javascript, HTML, CSS 的项目环境中，在公网及内网环境都可以完美的运行。

1.2 在线 Demo

根据不同的功能及预算需求，有两个版本的产品可供选择，两者仅在最终的批注保存阶段有区别，产品 Demo 地址如下：

① 批注合成版: https://demos.libertynlp.com/#/pdfjs-annotation
② 专业批注版: https://www.elasticpdf.com/demo

2. 移动至目标项目

移动 Elasticpdf 代码包到 jQuery 或者 HTML 项目任意位置中，这里我将它放置在顶层文件夹。

3. 导入目标文件

通过 <iframe> 导入 elasticpdf 代码包中的 viewer.html 文件，注意路径不要写错。

    <iframe id='pdfjs-iframe' src="elasticpdf/web/viewer.html" frameborder="0" width="100%"
    	height="770px"></iframe>

赋值参数后调用初始化函数，需要注意的是存放 pdf 文件的服务器需要返回支持跨域的请求头，否则会报 CORS 错误，具体方式可见文章服务器站点设置跨域请求头。

    //获取 elasticpdf_viewer
    var elasticpdf_viewer = document.getElementById('elasticpdf-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',    // 颜色主题，有 light(亮)、soft(护眼)和 dark(暗) 三种主题颜色可选
    		'pdf_url':'https://app.elasticpdf.com/web/tutorial.pdf',
    		'edit_others_annotation':true, 	// 是否允许当前用户编辑他人批注
    		'member_info':{
           			// 用户信息
    			'member_id':'elasticpdf_id',
    			'member_name':'elasticpdf_name',
    		},
    	});
    }

4. 导出 pdf 及批注数据

批注数据的保存有两种方式，我们推荐方式二。

4.1 方式一：批注写入PDF

是选择将批注写入到 pdf 中然后下载整个文档，一般用户可以通过Ctrl+S快捷键和 UI 按钮来完成，这种方式完全不需要后端服务的支持。

在需要保存批注后 pdf 至服务器的场景中，可以通过如下代码实现。

    // 绑定该函数至 dom 用于触发 pdf 保存
    function getPDFData() {
   
    	elasticpdf_viewer.getPDFData();
    }

    // 接收pdf数据并且上传至服务器
    window.addEventListener('message', (e) => {
   
    	if (e.data.source