{"id":1236,"date":"2015-10-21T16:18:25","date_gmt":"2015-10-21T21:18:25","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=1236"},"modified":"2022-10-07T13:26:10","modified_gmt":"2022-10-07T18:26:10","slug":"adding-pdf-preview-support-to-your-web-application","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2015\/10\/21\/adding-pdf-preview-support-to-your-web-application\/","title":{"rendered":"Adding PDF preview support to your web application"},"content":{"rendered":"<p>In recent <a href=\"http:\/\/xlinesoft.com\/blog\/2015\/06\/27\/using-google-docs-viewer-to-preview-documents-online\/\">Using Google Docs Viewer to preview documents online<\/a> article we reviewed the use of Google Docs Viewer for document preview purposes. While this is a viable approach two main concerns arise:<\/p>\n<ul>\n<li>dependency on third party service<\/li>\n<li>security issues<\/li>\n<\/ul>\n<p>For those who is looking for another solution there is a brilliant Javascript library named <a href=\"http:\/\/viewerjs.org\/\">ViewerJS<\/a> that supports PDF files as well as Open Office formats (.odp, .odt, .ods). This library can display documents right in the web browser, no need to install any additional software. Documents can be displayed either in full page mode or embedded into other pages. See some <a href=\"http:\/\/viewerjs.org\/examples\/\">examples<\/a>.  <\/p>\n<p><!--more--><\/p>\n<p>In this article we&#8217;ll show how you can use ViewerJS library in your PHPRunner projects. Before you do that feel free to check the live demo.<\/p>\n<p><!--<a target=\"_blank\" class=\"myButton\" href=\"http:\/\/xlinesoft.com\/livedemo\/pdfviewer\/documents_list.php\" rel=\"noopener noreferrer\">Live demo<\/a>--><\/p>\n<p>Here are integration steps:  <\/p>\n<p>1. Download <a href=\"http:\/\/viewerjs.org\/getit\/\">ViewerJS<\/a> library (use first download link). Unzip ViewerJS folder to source folder of your project. This is how it supposed to look if installed properly. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/scr1.png\" alt=\"\" title=\"scr1\" width=\"786\" height=\"429\" class=\"alignnone size-full wp-image-1238\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/scr1.png 786w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/scr1-300x163.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/scr1-150x81.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/10\/scr1-400x218.png 400w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/p>\n<p>2. Setup one of fields as document upload. You can use either basic upload or multiple-files upload. Set &#8216;View as&#8217; type of this field to &#8216;Custom&#8217; and use the following code.<\/p>\n<h3>Basic upload<\/h3>\n<p><b>PHP code:<\/b><\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\n$mftable = \"carscars\"; \r\n$mfield = \"descr\"; \r\n$ext=strtoupper(substr($value,strlen($value)-4)); \r\nif($ext == \".PDF\") \r\n$value=\"&lt;a target='_blank' href='ViewerJS\/#..\/mfhandler.php?file=\".$value.\"&table=\".$mftable.\"&field=\".$mfield.\"&pageType=list&key1=\".$data[\"id\"].\"'>\".$value.\"&lt;\/a>\"; \r\nelse \r\n$value=\"&lt;a target='_blank' href='mfhandler.php?file=\".$value.\"&table=\".$mftable.\"&field=\".$mfield.\"&pageType=list&key1=\".$data[\"id\"].\"' dir='LTR'>\".$value.\"&lt;\/a>\";\r\n<\/pre>\n<p><b>C# code:<\/b><\/p>\n<pre name=\"code\" class=\"csharp:nocontrols\">\r\ndynamic ext = null, mfield = null, mftable = null, value = null;\r\nmftable = new XVar(\"carscars\");\r\nmfield = new XVar(\"descr\");\r\next = XVar.Clone(CommonFunctions.strtoupper((XVar)(CommonFunctions.substr((XVar)(value), (XVar)(MVCFunctions.strlen(value) - 4)))));\r\nif(ext == \".PDF\")\r\n{\r\n\tvalue = XVar.Clone(MVCFunctions.Concat(\"<a target='_blank' href='ViewerJS\/#..\/mfhandler?file=\", value, \"&#038;table=\", mftable, \"&#038;field=\", mfield, \"&#038;pageType=list&#038;key1=\", data[\"id\"], \"' rel=\"noopener noreferrer\">\", value, \"<\/a>\"));\r\n}\r\nelse\r\n{\r\n\tvalue = XVar.Clone(MVCFunctions.Concat(\"<a target='_blank' href='mfhandler?file=\", value, \"&#038;table=\", mftable, \"&#038;field=\", mfield, \"&#038;pageType=list&#038;key1=\", data[\"id\"], \"' dir='LTR' rel=\"noopener noreferrer\">\", value, \"<\/a>\"));\r\n}\r\nreturn null;\r\n<\/pre>\n<p>In this code <strong>$mftable<\/strong> is the name of the table, <strong>$mfield<\/strong> is the name of the field that stores documents.<\/p>\n<h3>Multiple-files upload<\/h3>\n<p><b>PHP code:<\/b><\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\n$arrfile = my_json_decode($value); \r\n$value=\"\"; \r\n$mftable = \"carscars\"; \r\n$mfield = \"descr\"; \r\nfor($i=0;$i < count($arrfile);$i++){ \r\nif($value) \r\n$value.=\", \"; \r\nif($arrfile[$i][\"type\"] == \"application\/pdf\") \r\n$value.=\"&lt;a target='_blank' href='ViewerJS\/#..\/mfhandler.php?file=\".$arrfile[$i][\"usrName\"].\"&#038;table=\".$mftable.\"&#038;field=\".$mfield.\"&#038;pagetype=list&#038;key1=\".$data[\"id\"].\"'>\".$arrfile[$i][\"usrName\"].\"&lt;\/a>\"; \r\nelse \r\n$value.=\"&lt;a href='mfhandler.php?file=\".$arrfile[$i][\"usrName\"].\"&table=\".$mftable.\"&field=\".$mfield.\"&pagetype=list&key1=\".$data[\"id\"].\"' dir='LTR'>\".$arrfile[$i][\"usrName\"].\"&lt;\/a>\"; \r\n}\r\n<\/pre>\n<p><b>C# code:<\/b><\/p>\n<pre name=\"code\" class=\"csharp:nocontrols\">\r\ndynamic arrfile = XVar.Array(), i = null, mfield = null, mftable = null, value = null;\r\narrfile = XVar.Clone(CommonFunctions.my_json_decode((XVar)(value)));\r\nvalue = new XVar(\"\");\r\nmftable = new XVar(\"carscars\");\r\nmfield = new XVar(\"descr\");\r\ni = new XVar(0);\r\nfor(;i < MVCFunctions.count(arrfile); i++)\r\n{\r\n\tif(XVar.Pack(value))\r\n\t{\r\n\t\tvalue = MVCFunctions.Concat(value, \", \");\r\n\t}\r\n\tif(arrfile[i][\"type\"] == \"application\/pdf\")\r\n\t{\r\n\t\tvalue = MVCFunctions.Concat(value, \"<a target='_blank' href='ViewerJS\/#..\/mfhandler?file=\", arrfile[i][\"usrName\"], \"&#038;table=\", mftable, \"&#038;field=\", mfield, \"&#038;pagetype=list&#038;key1=\", data[\"id\"], \"' rel=\"noopener noreferrer\">\", arrfile[i][\"usrName\"], \"<\/a>\");\r\n\t}\r\n\telse\r\n\t{\r\n\t\tvalue = MVCFunctions.Concat(value, \"<a href='mfhandler?file=\", arrfile[i][\"usrName\"], \"&#038;table=\", mftable, \"&#038;field=\", mfield, \"&#038;pagetype=list&#038;key1=\", data[\"id\"], \"' dir='LTR'>\", arrfile[i][\"usrName\"], \"<\/a>\");\r\n\t}\r\n}\r\nreturn null;\r\n<\/pre>\n<p>Some additional bits of info. This sample code will display PDF files only, other files simply be downloaded to the end user device. This code is designed to open document preview in new window. If you like to open it in the same window remove <strong>target=_blank<\/strong> from the code. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In recent Using Google Docs Viewer to preview documents online article we reviewed the use of Google Docs Viewer for document preview purposes. While this is a viable approach two main concerns arise: dependency on third party service security issues For those who is looking for another solution there is a brilliant Javascript library named ViewerJS that supports PDF files as well as Open Office formats (.odp, .odt, .ods). This library can display documents right in the web browser, no need to install any additional&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2015\/10\/21\/adding-pdf-preview-support-to-your-web-application\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Adding PDF preview support to your web application&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1236"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1236"}],"version-history":[{"count":17,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1236\/revisions"}],"predecessor-version":[{"id":2798,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1236\/revisions\/2798"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}