{"id":4367,"date":"2026-01-19T17:57:03","date_gmt":"2026-01-19T23:57:03","guid":{"rendered":"https:\/\/ykim.synology.me\/wordpress\/?p=4367"},"modified":"2026-01-19T19:06:59","modified_gmt":"2026-01-20T01:06:59","slug":"pdf-js-in-wordpress","status":"publish","type":"post","link":"https:\/\/ykim.synology.me\/wordpress\/pdf-js-in-wordpress-4367\/","title":{"rendered":"PDF.js in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A general-purpose, web standards-based platform for parsing and rendering PDFs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PDF.js\ub97c \uc0ac\uc6a9\ud558\uc5ec bbPress \ud3ec\ub7fc\uc5d0 PDF\ub97c \uc784\ubca0\ub4dc\ud558\uace0, \uc778\uc1c4 \ubc0f \ub2e4\uc6b4\ub85c\ub4dc \ubc84\ud2bc\uc744 \uc81c\uac70\ud558\ub294 \ubc29\ubc95\uc740 \uac00\uc7a5 \uac15\ub825\ud55c \uc81c\uc5b4\uad8c\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ubc29\ubc95\uc740 PDF\ub97c \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc5d0\uc11c \uc9c1\uc811 \ub80c\ub354\ub9c1\ud558\uba70, UI \uc694\uc18c\ub97c \ucf54\ub4dc\ub85c \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac00\uc7a5 \ud6a8\uc728\uc801\uc778 \uad6c\ud604 \ubc29\ubc95\uc740 <strong>\ubcc4\ub3c4\uc758 \ubdf0\uc5b4 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uace0 bbPress \uac8c\uc2dc\uae00 \ub0b4\uc5d0\uc11c <code>iframe<\/code>\uc73c\ub85c \ubd88\ub7ec\uc624\ub294 \ubc29\uc2dd<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1\ub2e8\uacc4: PDF.js \ub77c\uc774\ube0c\ub7ec\ub9ac \uc900\ube44<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uba3c\uc800 <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/search?q=https:\/\/mozilla.github.io\/pdf.js\/getting_started\/%23download\">PDF.js \uacf5\uc2dd \ud648\ud398\uc774\uc9c0<\/a>\uc5d0\uc11c <strong>Prebuilt<\/strong> \ud328\ud0a4\uc9c0\ub97c \ub2e4\uc6b4\ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>\uc555\ucd95\uc744 \ud47c \ud6c4, WordPress \ud14c\ub9c8 \ud3f4\ub354 \ub0b4\uc5d0 <code>pdfjs<\/code>\ub77c\ub294 \uc774\ub984\uc758 \ud3f4\ub354\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.\n<ul class=\"wp-block-list\">\n<li>\uacbd\ub85c \uc608\uc2dc: <code>\/wp-content\/themes\/your-theme\/pdfjs\/<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ud574\ub2f9 \ud3f4\ub354 \uc548\uc5d0 <code>web<\/code>\uacfc <code>build<\/code> \ud3f4\ub354\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">2\ub2e8\uacc4: \ucd9c\ub825 \ubc0f \ub2e4\uc6b4\ub85c\ub4dc \uae30\ub2a5 \uc81c\uac70 (\ucf54\ub4dc \uc218\uc815)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>pdfjs\/web\/viewer.html<\/code> \ud30c\uc77c\uc744 \ud14d\uc2a4\ud2b8 \uc5d0\ub514\ud130\ub85c \uc5f4\uc5b4 \ub2e4\uc74c \ubd80\ubd84\uc744 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI \ubc84\ud2bc \uc228\uae30\uae30 (HTML): id=&#8221;download&#8221;, id=&#8221;print&#8221;, id=&#8221;secondaryDownload&#8221;, id=&#8221;secondaryPrint&#8221;\ub97c \uac00\uc9c4 &lt;button> \ud0dc\uadf8\ub97c \ucc3e\uc544 style=&#8221;display: none;&#8221;\uc744 \ucd94\uac00\ud558\uac70\ub098 \uc544\uc608 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ub2e8\ucd95\ud0a4 \ucc28\ub2e8 (JS): pdfjs\/web\/viewer.mjs (\ub610\ub294 viewer.js) \ud30c\uc77c\uc5d0\uc11c Ctrl+S, Ctrl+P\ub97c \uac10\uc9c0\ud558\ub294 \uc774\ubca4\ud2b8\ub97c \ucc3e\uc544 \ube44\ud65c\uc131\ud654\ud558\uac70\ub098, \uc544\ub798\uc758 CSS \ubc29\uc2dd\uc744 \ubcd1\ud589\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>CSS \uac15\uc81c \uc228\uae40 (\uac00\uc7a5 \ud655\uc2e4\ud568): pdfjs\/web\/viewer.css \ud30c\uc77c \ud558\ub2e8\uc5d0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* \ub2e4\uc6b4\ub85c\ub4dc \ubc0f \uc778\uc1c4 \ubc84\ud2bc \uac15\uc81c \uc228\uae40 *\/ \n#download, #print, #secondaryDownload, #secondaryPrint, #toolbarViewerRight { \n    display: none !important; \n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">3\ub2e8\uacc4: bbPress \uac8c\uc2dc\uae00\uc5d0 \uc784\ubca0\ub4dc\ud558\ub294 \ud568\uc218 \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c <code>functions.php<\/code>\uc5d0 \uc20f\ucf54\ub4dc\ub97c \ub4f1\ub85d\ud558\uc5ec bbPress\uc5d0\uc11c \uac04\ud3b8\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ &#x5B;pdf_safe_view url=&quot;PDF\ud30c\uc77c\uc8fc\uc18c&quot;] \uc20f\ucf54\ub4dc \uc0dd\uc131\nfunction register_pdf_safe_viewer_shortcode($atts) {\n    $a = shortcode_atts(array(\n        &#039;url&#039; =&gt; &#039;&#039;,\n    ), $atts);\n\n    if (empty($a&#x5B;&#039;url&#039;])) return &#039;PDF URL\uc774 \uc785\ub825\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.&#039;;\n\n    \/\/ \ud14c\ub9c8 \ud3f4\ub354 \ub0b4 pdfjs \uacbd\ub85c \uc124\uc815\n    $viewer_url = get_stylesheet_directory_uri() . &#039;\/pdfjs\/web\/viewer.html&#039;;\n    $file_url = esc_url($a&#x5B;&#039;url&#039;]);\n\n    \/\/ iframe\uc73c\ub85c \ubdf0\uc5b4 \ud638\ucd9c (\uc6b0\ud074\ub9ad \ubc29\uc9c0 \uc2a4\ud06c\ub9bd\ud2b8 \ud3ec\ud568)\n    return &#039;&amp;lt;iframe src=&quot;&#039; . $viewer_url . &#039;?file=&#039; . $file_url . &#039;#view=FitH&quot;\n            width=&quot;100%&quot; height=&quot;600px&quot; \n            style=&quot;border: none;&quot; \n            oncontextmenu=&quot;return false;&quot;&gt;&amp;lt;\/iframe&gt;&#039;;\n}\nadd_shortcode(&#039;pdf_safe_view&#039;, &#039;register_pdf_safe_viewer_shortcode&#039;);\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">4\ub2e8\uacc4: bbPress\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">bbPress \ud3ec\ub7fc\uc758 \ud1a0\ud53d\uc774\ub098 \ub2f5\uae00 \uc791\uc131 \uc2dc \uc544\ub798\uc640 \uac19\uc774 \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;pdf_safe_view url=&quot;https:\/\/your-site.com\/wp-content\/uploads\/document.pdf&quot;]\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">5\ub2e8\uacc4: \ucd94\uac00 \ubcf4\uc548 \uc870\uce58 (\uc6b0\ud074\ub9ad \ubc0f \ub4dc\ub798\uadf8 \ubc29\uc9c0)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ubdf0\uc5b4 \ub0b4\uc5d0\uc11c \ud14d\uc2a4\ud2b8\ub97c \ubcf5\uc0ac\ud558\uac70\ub098 \uc6b0\ud074\ub9ad\ud558\uc5ec \uc800\uc7a5\ud558\ub294 \uac83\uc744 \ub9c9\uae30 \uc704\ud574 <code>viewer.html<\/code>\uc758 <code>&lt;body&gt;<\/code> \ud0dc\uadf8\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;body oncontextmenu=&quot;return false&quot; onselectstart=&quot;return false&quot; ondragstart=&quot;return false&quot;&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udca1 \uc774 \ubc29\uc2dd\uc758 \ud575\uc2ec \uc7a5\uc810<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>UI \uc81c\uc5b4:<\/strong> \ube0c\ub77c\uc6b0\uc800\uc758 \uae30\ubcf8 PDF \ubdf0\uc5b4\uac00 \uc544\ub2cc PDF.js\uc758 UI\ub97c \uc4f0\uae30 \ub54c\ubb38\uc5d0 &#8216;\uc800\uc7a5&#8217; \ubc84\ud2bc\uc744 \uc644\uc804\ud788 \uc5c6\uc568 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uacbd\ub85c \uc740\ub2c9:<\/strong> \uc77c\ubc18\uc801\uc778 <code>&lt;a><\/code> \ud0dc\uadf8 \ub2e4\uc6b4\ub85c\ub4dc \ub9c1\ud06c\uac00 \ub178\ucd9c\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc0ac\uc6a9\uc790 \uacbd\ud5d8:<\/strong> bbPress \ub808\uc774\uc544\uc6c3 \ub0b4\uc5d0\uc11c \uae54\ub054\ud558\uac8c \ubb38\uc11c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Gemini<\/p>\n<div style='text-align:center' class='yasr-auto-insert-overall'><\/div><div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>A general-purpose, web standards-based platform for parsing and rendering PDFs. PDF.js\ub97c \uc0ac\uc6a9\ud558\uc5ec bbPress \ud3ec\ub7fc\uc5d0 PDF\ub97c \uc784\ubca0\ub4dc\ud558\uace0, \uc778\uc1c4 \ubc0f \ub2e4\uc6b4\ub85c\ub4dc \ubc84\ud2bc\uc744 \uc81c\uac70\ud558\ub294 \ubc29\ubc95\uc740 \uac00\uc7a5 \uac15\ub825\ud55c \uc81c\uc5b4\uad8c\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ubc29\ubc95\uc740 PDF\ub97c \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc5d0\uc11c \uc9c1\uc811 \ub80c\ub354\ub9c1\ud558\uba70, UI \uc694\uc18c\ub97c \ucf54\ub4dc\ub85c \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac00\uc7a5 \ud6a8\uc728\uc801\uc778 \uad6c\ud604 \ubc29\ubc95\uc740 \ubcc4\ub3c4\uc758 \ubdf0\uc5b4 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uace0 bbPress \uac8c\uc2dc\uae00 \ub0b4\uc5d0\uc11c iframe\uc73c\ub85c \ubd88\ub7ec\uc624\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. 1\ub2e8\uacc4: PDF.js&#8230;<\/p>\n","protected":false},"author":4,"featured_media":4381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","fifu_image_url":"","fifu_image_alt":"","iawp_total_views":1,"footnotes":""},"categories":[10,87],"tags":[],"class_list":["post-4367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-slug","category-wordpress-slug"],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"jetpack_featured_media_url":"https:\/\/ykim.synology.me\/wordpress\/wp-content\/uploads\/2026\/01\/20260119-PDF.JS-logo.svg","_links":{"self":[{"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/4367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/comments?post=4367"}],"version-history":[{"count":7,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/4367\/revisions"}],"predecessor-version":[{"id":4379,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/4367\/revisions\/4379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/media\/4381"}],"wp:attachment":[{"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=4367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=4367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ykim.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=4367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}