{"id":6296,"date":"2020-12-28T12:00:34","date_gmt":"2020-12-28T12:00:34","guid":{"rendered":"https:\/\/blog-staging.infyom.com\/?p=6296"},"modified":"2025-07-11T12:30:04","modified_gmt":"2025-07-11T12:30:04","slug":"show-saved-annotations-from-database-in-document-using-pdftron","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/","title":{"rendered":"Show saved annotations from database in document using PDFTron"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6296\" class=\"elementor elementor-6296\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-426a41c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"426a41c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6a8cb6b\" data-id=\"6a8cb6b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-84be682 elementor-widget elementor-widget-text-editor\" data-id=\"84be682\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Here we will learn how to import annotations saved in the database using PDFTron.<\/p><p>In my <a href=\"https:\/\/infyom.com\/blog\/export-annotations-in-file-using-pdftron\/\">last blog<\/a>, we have learned how to save annotations in the database.<\/p><h2>Events for import annotation<\/h2><p>At the time of document load, we will get all annotations saved in the database using AJAX call and then we&#8217;ll import that annotation. Now the question is if we import annotation then that will be drawn and again annotation changed event will fire and again annotation will be saved (as I say in my last blog), so this will become an infinite flow, but we can overcome this problem by checking if an annotation is imported or not. If an annotation is not imported then only we&#8217;ll save annotation in the database process otherwise we&#8217;ll ignore it.<\/p><p>When we draw any annotation, the &#8220;annotationChanged&#8221; event will be fired, and check if it is an imported annotation, then we can ignore it(eg, save annotation process).<\/p><p>Here is an example of how to import annotations from the database.<\/p><h3>Example<\/h3>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e7b6db elementor-widget elementor-widget-code-highlight\" data-id=\"4e7b6db\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>WebViewer({\n    path: 'path_to_the_PDFTron_'lib'_folder_on_your_server',\n    css: 'webviewer_css',\n    licenseKey: 'YOUR_PDF_TRON_LICENSE_KEY',\n    initialDoc: 'YOUR_FILE URL' \/\/url of a file to load\n}, document.getElementById('viewer'))\n    .then(function (instance) {\n        let docViewer = instance.docViewer;\n        let annotManager = instance.annotManager;\n\n        annotManager.on('annotationChanged', (annots, action, e) => {\n            \/\/if annotation is imported we'll return\n            if (e.imported) return;\n            \/\/when document will loaded we'll get annotations fro db\n            docViewer.on('documentLoaded', function () {\n                $.ajax({\n                    url: `URL_TO_SAVE_ANNOTATION`,\n                    type: 'GET',\n                    success: function (result) {\n                        if (result.success) {\n                            result.data.forEach(annotationObj => {\n\n      annotManager.importAnnotations(annotationObj.annotation);\n                            });\n                        }\n                    },\n                    error: function (result) {\n                        console.log(result);\n                    }\n                });\n            });\n        });\n    });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Here we will learn how to import annotations saved in the database using PDFTron. In my last blog, we have learned how&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[9],"tags":[183],"class_list":["post-6296","post","type-post","status-publish","format-standard","hentry","category-laravel","tag-pdftron"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Show saved annotations from database in document using PDFTron<\/title>\n<meta name=\"description\" content=\"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Show saved annotations from database in document using PDFTron\" \/>\n<meta property=\"og:description\" content=\"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-28T12:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-11T12:30:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"88\" \/>\n\t<meta property=\"og:image:height\" content=\"41\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"Show saved annotations from database in document using PDFTron\",\"datePublished\":\"2020-12-28T12:00:34+00:00\",\"dateModified\":\"2025-07-11T12:30:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\"},\"wordCount\":183,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"keywords\":[\"PDFTron\"],\"articleSection\":[\"Laravel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\",\"url\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\",\"name\":\"Show saved annotations from database in document using PDFTron\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"datePublished\":\"2020-12-28T12:00:34+00:00\",\"dateModified\":\"2025-07-11T12:30:04+00:00\",\"description\":\"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Show saved annotations from database in document using PDFTron\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Show saved annotations from database in document using PDFTron","description":"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/","og_locale":"en_US","og_type":"article","og_title":"Show saved annotations from database in document using PDFTron","og_description":"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.","og_url":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2020-12-28T12:00:34+00:00","article_modified_time":"2025-07-11T12:30:04+00:00","og_image":[{"width":88,"height":41,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"Show saved annotations from database in document using PDFTron","datePublished":"2020-12-28T12:00:34+00:00","dateModified":"2025-07-11T12:30:04+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/"},"wordCount":183,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"keywords":["PDFTron"],"articleSection":["Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/","url":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/","name":"Show saved annotations from database in document using PDFTron","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"datePublished":"2020-12-28T12:00:34+00:00","dateModified":"2025-07-11T12:30:04+00:00","description":"Display saved PDF annotations from your database using PDFTron, cover fetching, rendering, integration steps, and customization options.","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/show-saved-annotations-from-database-in-document-using-pdftron\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Show saved annotations from database in document using PDFTron"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/6296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=6296"}],"version-history":[{"count":9,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/6296\/revisions"}],"predecessor-version":[{"id":7610,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/6296\/revisions\/7610"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=6296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=6296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=6296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}