Angular 项目使用 pdf.js 及批注插件Elasticpdf 教程

摘要：本文章介绍如何在 Angular 中使用 pdf.js 及基于 pdf.js 的批注开发包 Elasticpdf。简单 5 步可完成集成部署，包括数据的云端同步，示例代码完善且简单，文末有集成代码分享。

1. 工具库介绍与 Demo

1.1 代码包结构

ElasticPDF基于开源 pdf.js (Demo地址：https://mozilla.github.io/pdf.js/web/viewer.html)，增加了多种开箱即用的 PDF 批注功能。代码包延续了 pdf.js-dist 独立且完全离线的结构风格，仅增加了用于支持批注的离线 Javascript 代码，与 pdf.js-dist 一样可以快速完美集成到任何可以运行Javascript, HTML, CSS 的项目环境中，在公网及内网环境下运行。

1.2 Elasticpdf 在线 Demo

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

① 批注合成版: https://demos.libertynlp.com/#/pdfjs-annotation

② 专业批注版: https://www.elasticpdf.com/demo

2. 移动至 Angular 项目

移动 pdf.js 或 Elasticpdf 代码包到 Angular 项目的 src/assets 文件夹下。

pdf.js 成功导入 Angular 快照

3. 导入 viewer.html

① 通过 <iframe> 导入 elasticpdf 或 pdf.js 代码包中的 viewer.html 到 Angular 页面中，例如 app.component.html，注意路径不要写错。

javascript 复制代码

<!-- elasticpdf 示例 -->
<iframe src="assets/elasticpdf/web/viewer.html" id='elasticpdf-iframe' 
(load)='initialPDFEditor()' width="100%" height="700px" frameborder="0"></iframe>

<!-- pdf.js 示例 -->
<iframe src="assets/pdfjs-3.2/web/viewer.html" id='elasticpdf-iframe'
(load)='initialPDFEditor()' width="100%" height="700px" frameborder="0"></iframe>

如果引入viewer.html后运行报错且信息为 Uncaught SyntaxError: Cannot use import statement outside a module。那么需要修改 viewer.html 中 viewer.js 及 pdf.js 的引入模式，具体方式为增添 type='module' 代码，否则会因为 Vite 自动注入代码至 js 中并导致如上报错。

javascript 复制代码

// 导入 pdf.js 核心 js 代码
<script src="../build/pdf.js"></script>
<script src="viewer.js"></script>

// 修改后导入 pdf.js 核心 js 代码
<script type='module' src="../build/pdf.js"></script>
<script type='module' src="viewer.js"></script>

② 将 web 文件夹下 viewer.js 中 defaultUrl 默认值置空，否则在第 ① 步中导入 viewer.html 时会默认加载 compressed.tracemonkey-pldi-09.pdf 文件，影响自定义加载文件的流程。Elasticpdf 代码包中的 viewer.js 已默认修改完成。

javascript 复制代码

// 原 defaultUrl 默认值
defaultOptions.defaultUrl = {
  value: "compressed.tracemonkey-pldi-09.pdf",
  kind: OptionKind.VIEWER
};

// 置空后默认值
defaultOptions.defaultUrl = {
  value: "",
  kind: OptionKind.VIEWER
};

③ 在 Angular 页面中(例如 app.component.ts)的 <iframe> onLoad() 函数下调用 initialApp() 函数，由于 pdf.js 和 elasticpdf 中的函数都是在 iframe 的作用域下，因此必须在 iframe load结束可获取 contentWindow 后再调用。

javascript 复制代码

var elasticpdf_viewer:any = null;
var elasticpdf_iframe:any = null;

export class AppComponent {
	initialPDFEditor() {
		elasticpdf_iframe = document.getElementById('elasticpdf-iframe') as HTMLIFrameElement;
		let pdf_url = "compressed.tracemonkey-pldi-09.pdf" as string;
		if (elasticpdf_iframe && elasticpdf_iframe.contentWindow) {
			elasticpdf_viewer = elasticpdf_iframe?.contentWindow as any;
			if (elasticpdf_viewer?.initialApp) {
				elasticpdf_viewer?.initialApp({
					'language': 'en', // 交互语言 UI language
					'pdf_url': pdf_url,
					'member_info': { 
						'id': 'elasticpdf_id',
						'name': 'elasticpdf',
					},
				});
			}
		}
	}
	
	// 监听pdf加载、编辑、导出等的广播信息
	@HostListener('window:message', ['$event'])
	onMessage(event : Event) : void {
		const e : any = event;
		if (e.data.source != 'elasticpdf') {
			return;
		}
		
		// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件
		if (e.data.function_name == 'pdfLoaded') {
			console.log('Angular PDF loaded 加载成功');
			this.reloadData();
		}
	}
}

④ pdf.js 初始化函数如下，主要内容为调用 PDFViewerApplication.open() 打开传入的文档链接，并使用 loadPdf() 函数监听文档是否初始化结束，最后通过 postMessage 广播加载状态至 Angular 页面。

javascript 复制代码

<script type='text/javascript'>
	//初始化函数
	function initialApp(paras) {
		var oriUrl=paras['pdf_url'];
		PDFViewerApplication.open(oriUrl);
		interval = setInterval('loadPdf()', 1000);
	}
	
	//监听文档是否初始化完成
	var interval = null;
	function loadPdf() {
		if (PDFViewerApplication.pdfDocument == null) {
			console.info('Loading...');
		} else {
			//文档初始化完成
			console.log('PDF Load successfully');
			clearInterval(interval);
			//广播信息
			postPDFData("pdfLoaded", '');
		}
	}
	
	//广播 pdf.js 操作状态信息
	function postPDFData(function_name,new_content){
		window.parent.postMessage({"type":0,"source":"elasticpdf",'function_name':function_name,"content":new_content},'*');
		window.postMessage({"type":0,"source":"elasticpdf",'function_name':function_name,"content":new_content},'*');
	}
</script>

⑤ 需要注意的是 pdf.js 端和存放 pdf 文件的都要支持跨域，否则会报 CORS 跨域错误。具体来说如果服务器是通过 Java 或者 Python 等程序提供文档，则需要在程序中允许跨域；而如果是 nginx 服务器，则在配置中可以如下设置。

javascript 复制代码

location / {
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers *;
	add_header Access-Control-Expose-Headers  Accept-Ranges,Content-Range;
	add_header Accept-Ranges bytes;
}

对于 pdf.js 端的跨域，需要在 elasticpdf 或 pdf.js 的 viewer.js 中搜索 HOSTED_VIEWER_ORIGINS 并加入域名。

javascript 复制代码

const HOSTED_VIEWER_ORIGINS = ["null", "http://mozilla.github.io", "https://mozilla.github.io"];

4. 导出 pdf 及批注数据

Elasticpdf 所生成批注数据的保存有两种方式，我们推荐方式二。pdf.js 默认将批注写入文档，无法分离保存。

4.1 方式一：批注写入PDF

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

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

javascript 复制代码

var elasticpdf_viewer:any = null;
var elasticpdf_iframe:any = null;

export class AppComponent {
	// 绑定该函数至 .html dom 用于触发 pdf 保存
	// <button class='theme-btn btn-outline-info' (click)="getPDFData()">获取PDF数据</button>
	getPDFData() {
		elasticpdf_viewer.getPDFData();
	}
	
	// 监听pdf加载、编辑、导出等的广播信息
	@HostListener('window:message', ['$event'])
	onMessage(event : Event) : void {
		const e : any = event;
		if (e.data.source != 'elasticpdf') {
			return;
		}
		
		// 接收pdf数据
		if (e.data.function_name == 'downloadPDF') {
			let file_name = e.data.content['file_name'];
			let pdf_blob = e.data.content['pdf_blob'];
			let pdf_base64 = e.data.content['pdf_base64'];
			console.log('PDF信息', pdf_base64);
			// 如果文档没有被编辑过，则 pdf_base64 仍然是文件名
			// 接收到 pdf 数据，其中 pdf_base64 可以快捷上传到服务器
			this.postService('upload-pdf-data', {
				'file_name': file_name,
				'file_id': '123ddasfsdffads',
				'file_data': pdf_base64,
			});
		}
	}
}

4.1 方式二：批注单独保存

针对云端同步批注的需求，单独将批注文件导出为JSON文件，传输并保存于服务器，之后加载回显后可继续编辑批注。

这样的方式仅需一个在线PDF原文件，只传输很小体积的批注(通常不到 1M 大小)，可以节约很多的存储和宽带费用。

javascript 复制代码

// 在 pdf 批注编辑后的回调函数中可以读取所有批注文件并且上传至服务器
@HostListener('window:message', ['$event'])
onMessage(event : Event) : void {
	const e : any = event;
	if (e.data.source != 'elasticpdf') {
		return;
	}
	
	// pdf 批注编辑回调，可以在此处导出批注并传输到服务器
	if (e.data.function_name == 'annotationsModified') {
		// 仅获取 pdf 批注文件，不写入到 pdf 中
		let this_data = elasticpdf_viewer.pdfAnnotation.outputAnnotations();
		let annotation_content = JSON.stringify(this_data['file_annotation']);
		let file_name = this_data['file_name'];
		console.log('批注信息', annotation_content);
		this.postService('upload-annotation-data', {
			'file_name': file_name,
			'file_id': '123ddasfsdffads',
			'file_annotation': annotation_content,
		});
	}
}

5. 重载 pdf 及批注数据

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

javascript 复制代码

// 在 pdf 加载完成后的回调中可以从服务器请求相应的批注并重载于 pdf 上。
@HostListener('window:message', ['$event'])
onMessage(event : Event) : void {
	const e : any = event;
	if (e.data.source != 'elasticpdf') {
		return;
	}
	
	// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件
	if (e.data.function_name == 'pdfLoaded') {
		console.log('Angular PDF loaded 加载成功');
		this.reloadData();
	}
	
	reloadData() {
		let file_name = 'tutorial.pdf'
		let annotation_content =this.postService('get-annotation-data', {
			'file_name': 'tutorial.pdf',
			'file_id': '123ddasfsdffads',
		});
		// 批注重载回显于当前文件
		elasticpdf_viewer.setPureFileAnnotation({
			'file_annotation': annotation_content
		});
	}
}

以上的所有与服务器的交互需要前后端协同，后端服务器需要响应程序来接收和保存数据，对于 Elasticpdf 的用户我们有简单的 PHP、Python 及 Java 代码示例供参考。

前端发起请求的示例函数 postService() 代码如下。

javascript 复制代码

// 与后端服务器进行网络通信的函数
postService(url:any, data:any) {
	var new_data = new URLSearchParams();
	var encrpte_data = data;
	new_data.append('data', encrpte_data);

	var base_url = "your-server-url";
	var posturl = base_url + url;
	const response = await fetch(posturl, {
		method: 'POST',
		headers: {},
		body: new_data,
	});

	const resp = await response.json();
	resp['data'] = JSON.parse(resp['data']);

	return resp;
}

总结

至此，pdf.js 及 elasticpdf 集成于 Angular 项目的代码完毕，带有 pdf.js 代码包的 Angular 示例项目包内容已上传至 Github(网址：https://github.com/ElasticPDF/Angular-use-pdf.js-elasticpdf)，可以直接下载。Elasticpdf 客户如有其他应用场景需求欢迎联系我们，我们将为您提供示例代码。

温馨提示 ：本文首发于 https://www.elasticpdf.com ，转载请注明出处：https://www.elasticpdf.com/blog/angular-use-pdfjs-and-elasticpdf-tutorial-zh.html