{"id":5042,"date":"2023-11-03T16:25:18","date_gmt":"2023-11-03T08:25:18","guid":{"rendered":"https:\/\/pdfjs.libertynlp.com\/?p=5042"},"modified":"2023-11-03T17:06:52","modified_gmt":"2023-11-03T09:06:52","slug":"how-to-use-pdf-js-with-react","status":"publish","type":"post","link":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/","title":{"rendered":"How to use PDF.JS with React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5042\" class=\"elementor elementor-5042\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c5e0b0c elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"c5e0b0c\" 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-3b63fa6\" data-id=\"3b63fa6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec9910e elementor-widget elementor-widget-text-editor\" data-id=\"ec9910e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p style=\"text-align: left;\">When we develop our React App, we may have to add PDF viewing and editing ability, the best way is use pdf.js and pdf.js based pdf annotation library, this blog will show you our best research product:<strong><em><span style=\"font-size: 1.1rem;\">\u2460 How to use PDF.js in React? <\/span><span style=\"font-size: 1.1rem;\">\u2461\u00a0<\/span><span style=\"font-size: 1.1rem;\">How to use pdf.js based PDF annotation library in react?\u00a0<\/span><\/em><\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e4e1cc elementor-widget elementor-widget-text-editor\" data-id=\"8e4e1cc\" 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><em><strong>Keywords:<\/strong><\/em> React, pdf.js , PDF viewing , pdf annotation , pdf editing.<\/p>\t\t\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f3c245d elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"f3c245d\" 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-35b23d7\" data-id=\"35b23d7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1b2eb78 elementor-widget elementor-widget-heading\" data-id=\"1b2eb78\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Part 1: How to use pdf.js in React?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bcaa5d9 elementor-widget elementor-widget-text-editor\" data-id=\"bcaa5d9\" 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>The best way to use pdf.js in React is using<span style=\"color: #0000ff;\"><strong><em> iframe<\/em><\/strong><\/span> tag to embed the office <span style=\"color: #ff6600;\"><strong>PDF.JS<\/strong><\/span> live demo, this will be able to use the beautiful and powerful HTML file Mozilla made for us.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-813919d elementor-widget elementor-widget-heading\" data-id=\"813919d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">App.js for React App<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5619abb elementor-aspect-ratio-169 elementor-widget elementor-widget-video\" data-id=\"5619abb\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/m43WZkymo9U&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;,&quot;aspect_ratio&quot;:&quot;169&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-video .elementor-widget-container{overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-background-size:cover;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}<\/style>\t\t<div class=\"elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-77c9881 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"77c9881\" 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-ebd67b6\" data-id=\"ebd67b6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c3be1a elementor-widget elementor-widget-heading\" data-id=\"4c3be1a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Part 2: Using pdf.js based PDF Annotation Library in React<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66cdb18 elementor-widget elementor-widget-text-editor\" data-id=\"66cdb18\" 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>After you know how to official pdf.js in you React App, it will be easy to add PDF Annotation ability to your app. The only thing you need do is change the src in iframe to our pdf annotation library.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9962bd1 elementor-widget elementor-widget-text-editor\" data-id=\"9962bd1\" 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>For more detail of our library, welcome to visit our live demo: <span style=\"text-decoration: underline; color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/demos.libertynlp.com\"><em><strong>https:\/\/demos.libertynlp.com<\/strong><\/em><\/a><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86ca948 elementor-widget elementor-widget-heading\" data-id=\"86ca948\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">App.js for React App<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e40b01 elementor-aspect-ratio-169 elementor-widget elementor-widget-video\" data-id=\"2e40b01\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/B69EFpuYwDw&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;,&quot;aspect_ratio&quot;:&quot;169&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e0fee18 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"e0fee18\" 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-379e606\" data-id=\"379e606\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f71ee24 elementor-widget elementor-widget-heading\" data-id=\"f71ee24\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summary<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a887b1 elementor-widget elementor-widget-text-editor\" data-id=\"4a887b1\" 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>We had figured out the way about how to use pdf.js and pdf annotation in React, if you are interested in our product, welcome to visit our live demo: <span style=\"text-decoration: underline; color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/demos.libertynlp.com\"><em><strong>https:\/\/demos.libertynlp.com<\/strong><\/em><\/a><\/span><\/p>\t\t\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This blog will show you our best research product about:\u2460 How to use PDF.js in React? \u2461 How to use pdf.js based PDF annotation library in react? <\/p>\n","protected":false},"author":1,"featured_media":5064,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,58,1,26],"tags":[],"class_list":["post-5042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-pdf-js-annotation","category-uncategorized","category-webpdfviewer"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use PDF.JS with React - pdf.js annotation library for everyone!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use PDF.JS with React - pdf.js annotation library for everyone!\" \/>\n<meta property=\"og:description\" content=\"This blog will show you our best research product about:\u2460 How to use PDF.js in React? \u2461 How to use pdf.js based PDF annotation library in react?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"pdf.js annotation library for everyone!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-03T08:25:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-03T09:06:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2023\/11\/\u5c01\u9762\u56fe.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2735\" \/>\n\t<meta property=\"og:image:height\" content=\"1667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Chaoxu Wei\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaoxu Wei\" \/>\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\":\"WebSite\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/\",\"name\":\"pdf.js annotation library for everyone!\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\",\"name\":\"How to use PDF.JS with React - pdf.js annotation library for everyone!\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\"},\"datePublished\":\"2023-11-03T08:25:18+00:00\",\"dateModified\":\"2023-11-03T09:06:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/pdfjs.libertynlp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use PDF.JS with React\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\"},\"author\":{\"name\":\"Chaoxu Wei\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"headline\":\"How to use PDF.JS with React\",\"datePublished\":\"2023-11-03T08:25:18+00:00\",\"dateModified\":\"2023-11-03T09:06:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/\"},\"wordCount\":243,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"articleSection\":{\"0\":\"Frontend\",\"1\":\"PDF.js annotation\",\"3\":\"Web PDF Viewer\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\",\"name\":\"Chaoxu Wei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"contentUrl\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"width\":2297,\"height\":2297,\"caption\":\"Chaoxu Wei\"},\"logo\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\"},\"description\":\"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!\",\"sameAs\":[\"https:\/\/pdfjs.libertynlp.com\",\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\",\"https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA\"],\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use PDF.JS with React - pdf.js annotation library for everyone!","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:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/","og_locale":"en_US","og_type":"article","og_title":"How to use PDF.JS with React - pdf.js annotation library for everyone!","og_description":"This blog will show you our best research product about:\u2460 How to use PDF.js in React? \u2461 How to use pdf.js based PDF annotation library in react?","og_url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/","og_site_name":"pdf.js annotation library for everyone!","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_author":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_published_time":"2023-11-03T08:25:18+00:00","article_modified_time":"2023-11-03T09:06:52+00:00","og_image":[{"width":2735,"height":1667,"url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2023\/11\/\u5c01\u9762\u56fe.png","type":"image\/png"}],"author":"Chaoxu Wei","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaoxu Wei","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/pdfjs.libertynlp.com\/#website","url":"https:\/\/pdfjs.libertynlp.com\/","name":"pdf.js annotation library for everyone!","description":"","publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/","url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/","name":"How to use PDF.JS with React - pdf.js annotation library for everyone!","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/#website"},"datePublished":"2023-11-03T08:25:18+00:00","dateModified":"2023-11-03T09:06:52+00:00","breadcrumb":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/pdfjs.libertynlp.com\/"},{"@type":"ListItem","position":2,"name":"How to use PDF.JS with React"}]},{"@type":"Article","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#article","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/"},"author":{"name":"Chaoxu Wei","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"headline":"How to use PDF.JS with React","datePublished":"2023-11-03T08:25:18+00:00","dateModified":"2023-11-03T09:06:52+00:00","mainEntityOfPage":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/"},"wordCount":243,"commentCount":0,"publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"articleSection":{"0":"Frontend","1":"PDF.js annotation","3":"Web PDF Viewer"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2023\/11\/03\/how-to-use-pdf-js-with-react\/#respond"]}]},{"@type":["Person","Organization"],"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032","name":"Chaoxu Wei","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/","url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","contentUrl":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","width":2297,"height":2297,"caption":"Chaoxu Wei"},"logo":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/"},"description":"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!","sameAs":["https:\/\/pdfjs.libertynlp.com","https:\/\/www.facebook.com\/profile.php?id=100083516062282","https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA"],"url":"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/"}]}},"_links":{"self":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/5042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/comments?post=5042"}],"version-history":[{"count":23,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/5042\/revisions"}],"predecessor-version":[{"id":5069,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/5042\/revisions\/5069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media\/5064"}],"wp:attachment":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media?parent=5042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/categories?post=5042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/tags?post=5042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}