Need help loading pdf in html file

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 8 Views: 217

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	confirm \| cancel 11/19/13 08:41 AM (10 years ago) Need help loading pdf in html file I am trying to write a simple html file that will load a pdf at full screen (100% width). The reason I want to do this is because I have a custom search plugin that can "search" in html files but not pdfs. So by adding some keywords in the meta tags I can make these pdfs searchable. I have googled this and found a few possibilities but none of them work quite right. I basically want it to look like the pdf plugin but by using a html file. Does anyone know how to do this?? Thanks!! Josh Title Comments I am trying to write a simple html file that will load a pdf at full screen (100% width). The reason I want to do this is because I have a custom search plugin that can "search" in html files but not pdfs. So by adding some keywords in the meta tags I can make these pdfs searchable. I have googled this and found a few possibilities but none of them work quite right. I basically want it to look like the pdf plugin but by using a html file. Does anyone know how to do this?? Thanks!! Josh

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	11/19/13 08:47 AM (10 years ago) And the pdf files will be located within the app itself and not available online... Comments And the pdf files will be located within the app itself and not available online...

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	11/19/13 12:52 PM (10 years ago) I just did a quick google - did you come across this ? https://github.com/mozilla/pdf.js Comments I just did a quick google - did you come across this ? https://github.com/mozilla/pdf.js

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	11/19/13 12:55 PM (10 years ago) I saw that, yes. The problem is I don't want any toolbar on the top. Also, this doesn't allow the pinch and zoom that is native to iOS apps. You instead need to click on the little - and + which isn't very user friendly. Comments I saw that, yes. The problem is I don't want any toolbar on the top. Also, this doesn't allow the pinch and zoom that is native to iOS apps. You instead need to click on the little - and + which isn't very user friendly.

Dragon007 Lost but trying Posts: 1509 Reg: Dec 17, 2011 London 20,590	11/19/13 02:01 PM (10 years ago) Confused, is this PDF load from the app or from a server somewhere? Comments Confused, is this PDF load from the app or from a server somewhere?

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	11/19/13 02:33 PM (10 years ago) The html and pdf files will both be local in the app. I want it to look just like the pdf plugin but load from an html file. I have tried to "embed" the file and load it as an "object" but it never looks right, won't take up the entire screen and rarely zooms. Don't understand why this is so difficult, you would think just setting it to width and height of 100% would fix the issue... but no. Comments The html and pdf files will both be local in the app. I want it to look just like the pdf plugin but load from an html file. I have tried to "embed" the file and load it as an "object" but it never looks right, won't take up the entire screen and rarely zooms. Don't understand why this is so difficult, you would think just setting it to width and height of 100% would fix the issue... but no.

ictguy Aspiring developer Posts: 564 Reg: Jun 17, 2011 Mildura, Austra... 15,840	11/19/13 03:28 PM (10 years ago) @Mutzy, What about this as a workaround ... Use the HTML Pro plugin and then link to the regular PDF BT screen? Might not be great for navigation depending on your set up and usecase. Cheers Darrel Comments @Mutzy, What about this as a workaround ... Use the HTML Pro plugin and then link to the regular PDF BT screen? Might not be great for navigation depending on your set up and usecase. Cheers Darrel

nadthevlad Code is Art Posts: 1025 Reg: Jun 07, 2012 Denver 21,850	11/20/13 04:28 PM (10 years ago) Could you do a pdf to html conversion on the pdf file? Then use that in the app with the html plugins. Comments Could you do a pdf to html conversion on the pdf file? Then use that in the app with the html plugins.

herb200mph I hate code! Posts: 33 Reg: Aug 09, 2012 Salisbury NC 330	12/10/13 12:33 PM (10 years ago) Here is an "htm" file that contains a call to a pdf, and it zooms/pinches pefectly. = = = = = <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="height=device-height,width=device-width"> <title></title> <style> #imgbox { height: 100%; width: 100%; background-color: #FFFFFF; margin-left: -5px; text-align: center; padding-top: 10px; } </style> </head> <body> <div id="imgbox"> <img src="nameofpdf.pdf" height="auto" width="768px"/> </div> </body> </html> Comments Here is an "htm" file that contains a call to a pdf, and it zooms/pinches pefectly. = = = = = <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="height=device-height,width=device-width"> <title></title> <style> #imgbox { height: 100%; width: 100%; background-color: #FFFFFF; margin-left: -5px; text-align: center; padding-top: 10px; } </style> </head> <body> <div id="imgbox"> <img src="nameofpdf.pdf" height="auto" width="768px"/> </div> </body> </html>

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.