This article introduces the online version of the ElasticPDF API tutorial for the PDF annotation plug-in library in Vue projects. The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions to meet common business needs. This tutorial can be used for monthly licenses and online trial versions. Welcome Contact us for consultation and obtain trial keys.
0 ElasticPDF Introduction
ElasticPDF is based on the open source pdf.js (Demo：https://mozilla.github.io/pdf.js/web/viewer.html) and adds a variety of out-of-the-box PDF annotation features. The code package continues the independent and completely offline structure style of pdf.js-dist, and only adds offline Javascript code to support annotations. It can be quickly and perfectly integrated into any project environment that can run Javascript, HTML, and CSS, and run perfectly in both public and intranet environments.
For the different features and budget requirements, there are two versions of the products, they are only differ in the final annotation saving stage, demos are as follows:
① Annotation synthesis version: https://demos.libertynlp.com/#/pdfjs-annotation
② Professional annotation version: https://www.elasticpdf.com/demo
1 Import Viewer HTML and Initial
First, import the following HTML code into the target page, which includes the initialization code initialPDFEditor() and the function listenPDFEditorMessage() that receives all feedback information. All exported PDF data and annotation data are under the function listenPDFEditorMessage() and can be integrated with subsequent functions.
<template>
<div id='english_content' style="display: none;" class='project-title'>
<img src="https://elasticpdf.com/elasticpdf-image/logo-no-back.png" alt="" />
<h2>Vue Web PDF editor library Online API examples</h2>
<a style="cursor: pointer;text-decoration: none;" href='https://www.elasticpdf.com/contact-us.html'
target="_blank">
<div title='contact us for trial key' class='message-div info-message'>
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span>Get trial key</span>
</div>
</a>
<button style="margin-left: 20px;" class='theme-btn btn-outline-warning'
onclick="getPDFData()">Export Edited PDF</button>
<button class='theme-btn btn-outline-help' onclick="outputAnnotation()">Export Annotations</button>
<button class='theme-btn btn-outline-success' onclick="changeFile()">Change File</button>
<button class='theme-btn btn-outline-warning' onclick="setMember()">Change User</button>
<button class='theme-btn btn-outline-danger' onclick="clearAnnotation()">Clear</button>
<button class='theme-btn btn-outline-info' onclick="reloadOldAnnotationData()">Reload Annotations</button>
</div>
<iframe @load='initialPDFEditor' id='elasticpdf-iframe'
src="https://pdfmaster.libertynlp.com/web/viewer.html?file=tutorial.pdf"
style="position: relative; width: 100%; height: 660px;border: none;"></iframe>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue'
onMounted(() => {
})
var elasticpdf_viewer = null;
var default_lang='en';
function initialPDFEditor() {
showContentByLanguage();
// Listen for callbacks of various information about PDF editing
// 监听 pdf 编辑各种信息的回调
listenPDFEditorMessage();
elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;
// The online version only supports opening online documents
// 在线版只支持打开在线文档
// var pdf_url = 'https://pdfmaster.libertynlp.com/web/tutorial.pdf';
var pdf_url = 'https://app.elasticpdf.com/web/tutorial.pdf';
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "initialApp",
"content": {
'language': default_lang, // GUI language 交互语言
'pdf_url': pdf_url,
'member_info': { //Member Info 用户信息
'id': 'elasticpdf_id',
'name': 'elasticpdf',
},
}
}, '*');
}
// For security reasons, console output has been disabled by the test website and cannot use console.log to print out content
// Please use alert to print content
// 出于安全考虑, 控制台输出已被测试网站禁用无法使用 console.log 打印出内容
// 请用 alert 打印内容
function listenPDFEditorMessage() {
window.addEventListener('message', (e) => {
if (e.data.source != 'elasticpdf') {
return;
}
// PDF loading completed callback, you can import the annotation file stored on the server here
// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件
if (e.data.function_name == 'pdfLoaded') {
// console.log is invalid, please use alert to print content
// console.log 无效，请使用 alert 打印内容
// alert('PDF loaded successfully PDF加载成功');
reloadData();
}
// PDF annotation editing callback, where annotations can be exported and transferred to the server
// pdf 批注编辑回调，可以在此处导出批注并传输到服务器
if (e.data.function_name == 'annotationsModified') {
// Only get the PDF annotation data, do not write it into the PDF
// 仅获取 pdf 批注文件，不写入到 pdf 中
let this_data = e.data.content;
let annotation_content = JSON.stringify(this_data['file_annotation']);
let file_name = this_data['file_name'];
// console.log is invalid, please use alert to print content
// alert('annotation modified 批注被修改');
postService('upload-annotation-data', {
'file_name': file_name,
'file_id': '123ddasfsdffads',
'file_annotation': annotation_content,
});
}
// PDF annotation export callback, where annotations can be exported and transferred to the server
// pdf 批注导出回调，可以在此处导出批注并传输到服务器
if (e.data.function_name == 'outputAnnotation') {
// Only get the PDF annotation data, do not write it into the PDF
// 仅获取 pdf 批注文件，不写入到 pdf 中
let this_data = e.data.content;
let annotation_content = JSON.stringify(this_data['file_annotation']);
let file_name = this_data['file_name'];
// console.log is invalid, please use alert to print content
// console.log 无效，请使用 alert 打印内容
// alert('Annotation data 批注数据\n'+annotation_content);
}
// Receive the edited PDF data, and the annotations are written into the PDF
// 接收编辑后的pdf数据，批注被写入 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'];
// If the document has not been edited, pdf_base64 is still the file name or file url
// Receive pdf data, where pdf_base64 can be quickly uploaded to the server
// 如果文档没有被编辑过，则 pdf_base64 仍然是文件名或文件链接
// 接收到 pdf 数据，其中 pdf_base64 可以快捷上传到服务器
postService('upload-pdf-data', {
'file_name': file_name,
'file_id': '123ddasfsdffads',
'file_data': pdf_base64,
});
// alert('Get the pdf base64 data. Please go to postService function to add the subsequent function.\n\n获取到 pdf base64 数据，如有需要请到postService中增加业务函数');
}
});
}
</script>
2 Call APIs
① Export annotation data
The json data of the exported PDF annotations can be used for subsequent business processes such as filtering, merging, storage and saving. It is very suitable for online annotation application, because you only need to save an original PDF document, and then reload only the annotations from the database, which can save a lot of server, internet and bandwidth costs.
// export annotations data 导出可保存的批注对象
function outputAnnotation() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "outputAnnotation",
"content": ""
}, '*');
}
② Import old annotations
Load the annotation data exported in ① from the server according to the file ID or PDF link and reshow it on the document, supporting continuely editing, so as to achieve cloud synchronization of annotation data.
// reload old annotation data
// 加载旧批注
function reloadOldAnnotationData() {
var old_annotation = getOldAnnotation();
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "setFileAnnotation",
"content": old_annotation
}, '*');
}
// Generate simulated old annotation data
// 生成模拟旧批注数据
function getOldAnnotation() {
var old_annotation = {
"annos-for-page-1": {
"page_id": "annos-for-page-1",
"page_canvas_container": {},
"page_annotations": [],
"page_canvas": {
"fabric_canvas": {
"version": "5.2.0",
"objects": [{
"type": "rect",
"version": "5.2.0",
"left": 64.38,
"top": 159.99,
"width": 608.27,
"height": 290.3,
"fill": "rgba(255,237,0,0.3)",
"stroke": "rgba(17,153,158,1)",
"erasable": true
}],
"background": "rgba(255, 255, 255, 0)"
},
"width": 994,
"height": 1407,
"fabric_canvas_json": {
"version": "5.2.0",
"objects": [{
"type": "rect",
"version": "5.2.0",
"left": 64.38,
"top": 159.99,
"width": 608.27,
"height": 290.3,
"fill": "rgba(255,237,0,0.3)",
"stroke": "rgba(17,153,158,1)",
"erasable": true,
"id": "1742436474916_1",
"hasControls": true,
"hasBorders": true,
"selectable": true,
"lockMovementX": false,
"lockMovementY": false,
"member_id": "elasticpdf_id",
"member_name": "elasticpdf",
"my_type": "rectangle",
"comment": "添加批注",
"backup_opacity": 1,
"lockRotation": false
}],
"background": "rgba(255, 255, 255, 0)"
}
}
}
}
return JSON.stringify(old_annotation);
}
③ Export Edited PDF file
Export edited PDF file after merging the annotations into it, the base64 PDF data can be directly saved in the database.
// export edited pdf data
// 导出批注编辑后pdf数据
function getPDFData() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "getPDFData",
"content": ""
}, '*');
}
④ Change and open files
Open online documents, where the file server or file site needs to allow CORS, otherwise the document loading will fail.
// You can change test_pdf with any online pdf url
// The file server needs to be configured to allow cross-domain
// 切换打开的文档，可以把 test_pdf 换成任意在线pdf链接
// 文件服务器需要配置允许跨域
function changeFile() {
var test_pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "openFile",
"content": test_pdf
}, '*');
}
⑤ Set member information
Set userID and userName of current user in elasticpdf. This information will be recorded in each annotation and can be used to set permissions, such as whether the current user is allowed to edit other people’s annotations.
// set member info including id and name
// 设置用户的 id 和 name
function setMember(id) {
var this_member = {
'id': 'test-id',
'name': 'test-name',
};
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "setMember",
"content": this_member
}, '*');
}
⑥ Clear annotation data
Clear the annotations of current document.
// clear all annotations
// 清空批注
function clearAnnotation() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "clearFileAnnotation",
"content": ""
}, '*');
}
Summary
So far, the code for integrating the elasticpdf online trial version into Vue projects and calling the data business API has been introduced. The test code file has been uploaded to Github (URL: https://github.com/ElasticPDF/Vue-use-pdf.js-elasticpdf). You are welcome to contact us for consultation and to obtain the key.
Tips: This article was first published on https://www.elasticpdf.com ，Please indicate the source when republishing: https://www.elasticpdf.com/blog/vue-pdf-annotation-plugin-library-online-api-examples.html
