4

i need to display a pdf on the website. i've tried many ways but none of it worked for me. let me explain what i've tried and why this is not ok for me.

  1. i tried to insert pdf into html with <object> and <embed> tags. its ok if client browser has flash. but android phones don't have it so this is not a solution. plus iphone streching pdf so it is not readable.
  2. then i tried to use just an <iframe> element. works fine only if browser has pdf plugin. in other cases browser starts file downloading. so this is not a solution too.
  3. then i tried to use https://docs.google.com/gview?embedded=true&url=myfile.pdf. well and here i got troubles because there is some bug in in google docs because file displays only one in for times. the rest attempts ended with error code 200 from google. so as you already understood this is not a solution too.
  4. then i tried to download php libs which should convert pdf to html (or image) but none of them worked beacuse i'm not that good at php and sometimes it asked to install third party libs so at this point i've failed too.

so now i'm stuck. i need to do something to display pdf on the page. i need some crossbrowser/responsive solution. it would be great if you help me to find some service like https://docs.google.com/gview which is gonna work without bugs or suggest any other solution. may be some small php lib with good documentation.

any help appriciated!

SuperYegorius
  • 754
  • 6
  • 24
  • Have a look at a JS library from Mozilla https://github.com/mozilla/pdf.js/ . – Dinca Adrian May 05 '17 at 08:41
  • when i using github.com/mozilla/pdf.js it gives me error like this PDF.js v1.4.20 (build: b15f335) Message: file origin does not match viewer's. may be this is because of pdf located not on my domain? and i cant change its location. – SuperYegorius May 05 '17 at 08:59
  • You can adjust (and even remove this check). See https://github.com/mozilla/pdf.js/pull/6916 -- e.g. change HOSTED_VIEWER_ORIGINS list. – async5 May 05 '17 at 12:56
  • Possible duplicate of [How to display pdf file in HTML](https://stackoverflow.com/questions/17784037/how-to-display-pdf-file-in-html) – Joe Dec 07 '17 at 11:15

1 Answers1

0

You can achieve by using PDF.js

https://github.com/mozilla/pdf.js/

for usage you can check this example http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples.

Mr.Throg
  • 925
  • 6
  • 21
  • when i using https://github.com/mozilla/pdf.js/ it gives me error like this PDF.js v1.4.20 (build: b15f335) Message: file origin does not match viewer's. may be this is because of pdf located not on my domain? and i cant change its location. – SuperYegorius May 05 '17 at 08:51
  • Could you please tell steps what you did. you need to just include https://github.com/mozilla/pdf.js/blob/master/src/pdf.js https://github.com/mozilla/pdf.js/blob/master/src/pdf.worker.js these two files in your page. You don't need to bother about the repo as the whole repo is for development build. – Mr.Throg May 05 '17 at 09:09
  • i'm working with wordpress. i've installed plugin with pdf.js. it works fine with pdfs located on my server. but when i try to display pdf on another domain it gives me this error. this is the link so you could se what i'm talking about http://cyr.lofite.com/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php?file=https://www.old.health.gov.il/units/pharmacy/trufot/alonim/Rishum_1_263172716.pdf&download=true&print=true&openfile=false – SuperYegorius May 05 '17 at 09:20
  • For cross domains that won't possible to display. You can check more about cross domain https://www.google.co.in/url?sa=t&source=web&rct=j&url=http://stackoverflow.com/questions/23927850/what-is-the-cross-domain-issue&ved=0ahUKEwj1ivOXvtjTAhUPT48KHTQgD6IQFggbMAA&usg=AFQjCNHgSV6hpLuo9CVm72VM8BC-R6JGaA&sig2=BWgt0GDao3xahsJVH_MAKg – Mr.Throg May 05 '17 at 09:55