CODEWITHSUNDEEP
javascriptpdfmeteormozillameteorite
iamhimadri
iamhimadri

Reputation: 552

Integrating Mozila Pdf.js with Meteor

I want pdf.js only on client side in meteor. It's been so long i am working on this. So this post will little long to give you better understanding what i have done so far.

I started with using meteor package pascoual:pdfjs. After following example given in this package i got only one page inside <canvas> like Hello World example in pdf.js. But i want like demo given by pdf.js. After some research and post in stackoverflow got no conclusion that how to do same with this package.

One more package recommended by pdf.js is peerlibrary:pdf.js. I haven't use it bcoz it is for both client and server side. I want to only client side to view the pdf file providing the url.

Then I started How can i setup PDF.js manually in my project. I followed Setup PDF.js in a website. Downloaded the gh-pages branch from pdf.js as told to do in instruction. Copied build and web directory and put in my meteor project. I customized files as per meteor, project structure looks like:

.meteor/
client/
  |- build/
  |    |- pdf.js
  |    |- pdf.worker.js
  |- cmaps/                                            -- contains all .bcmap files
  |- stylesheets/
  |    |- viewer.css
  |- web/
  |    |- compatibility.js
  |    |- debugger.js
  |    |- l10n.js
  |    |- viewer.html
  |    |- viewer.js
lib/
  |- locale/
public/
  |- compressed.tracemonkey-pldi-09.pdf                -- default pdf
  |- /* all images present in image directory*/

Errors after run the project:

  1. client/web/viewer.html:1: Can't set DOCTYPE here. (Meteor sets for you).

    • remove <!DOCTYPE html> form viewer.html

  2. client/web/viewer.html:23: bad formatting in HTML template

    • remove <html> and <head> from viewer.html. Kept only body.

Hurray!!! Now black viewer is coming. But default pdf is not loading... :(

After a long time i found something in build\pdf.js

enter image description here

I changed here (no idea it will effect in future or not):

PDFJS.disableWorker = true;

Once Again, Hurrey! default pdf file is loading properly & toolbar also working fine.

Viewer.html contains <body> tag. So, it is loading in brower at very first landing. If i remove <body> if it giving bad formatting in HTML template, because then we have to make it as a template.

Now my Questions are:

Please share your helpful thoughts. Waiting for a healthy discussion...

Upvotes: 2

Views: 1027

Answers (3)

kumbhani bhavesh
kumbhani bhavesh

Reputation: 2257

you can use google docs viewer within an iframe:

<iframe src="http://docs.google.com/gview?url={{url}}&embedded=true" frameborder="0"></iframe>

at url write your url which you want to open pdf .

Upvotes: 0

zeah
zeah

Reputation: 254

use iframe to load the url like this

<iframe src="pathof/web/viewer.html?file=url of pdf file"></iframe>

This worked for me.

Upvotes: 1

Billybobbonnet
Billybobbonnet

Reputation: 3226

  • How can i route to viewer.html if it is not a template?

You will need to use a template, that's how meteor routes works

  • If i make make viewer.html as a template then how can i keep the viewer.js code?

You will need to wrap it into your template rendered function:

Template.YourTemplate.rendered = function() {
    //do your stuff
};
  • Last but not the least, am i going to right direction? Is there any other way...?

There is no obvious way to achieve what you want and there is several other ways, as you identified yourself. I guess the right approach is (at first at least) the one that works. Give a try to the template approach and have a look at how to use iron-router.

However, if you have an hard time achieving the pdf display your way, I advise you to give a try to peerlibrary:pdf.js. The fact that it works also on server shouldn't be a show stopper, it won't make a significant difference in performance and it could end up being useful for implementing features you don't think about yet.

Upvotes: 1

Related Questions