[Solved] How to use pdf plugin to show any pdf on the page

Software Support
1

i would like to know how can use pdf plugin on a page of my choice displaying a pdf of my choice. anyone can help?
right now i am using iframe from google drive but i want to use the OJS plugin for pdf and put all pdfs on the server

2

Hi @falexandremc,

Do you mean using PDF.js to embed a PDF on e.g. a static page of OJS? Or is this attached to an article? I’m not sure I understand where you want to put a PDF.

Regards,
Alec Smecher
Public Knowledge Project Team

3

i want to use PDF.js to embed a PDF on a new custom page
@bozana
@asmecher

Best Regards

4

Hi @falexandremc,

The short answer is that you’ll need to identify the right template file to edit and add the PDF.js mark-up to it. If you’re using the custom pages plugin, or the nav menus tool, you might need to adust it to allow the kind of mark-up that PDF.js requires (an iframe, IIRC).

Regards,
Alec Smecher
Public Knowledge Project Team

5

thanks @asmecher. i am starting to understand =D
so did u know where can i find the documentation, tutorial or any other guide with the steps to add the PDF.js mark-up to the right template that i will identify?
if i see any code i will uderstand a lot better.

Regards

6

Hi @falexandremc,

I’m afraid there’s nothing specific to walk you through that task at the moment.

Regards,
Alec Smecher
Public Knowledge Project Team

7

i did use the following code. i hope that helps some one else in the future.
it not so pretty but works.
it is also needed go to /var/www/html/plugins/generic/pdfJsViewer/pdf.js/web/viewer.js and add the ojsserver.com in the list of accepted pdf origins like this

var HOSTED_VIEWER_ORIGINS = ['null', 'http://mozilla.github.io', 'https://mozilla.github.io', 'http://ojsserver.com'];

and this code go to the page that will show the pdf archive,

<div id="content">
   <div style="text-align: right; padding: 5px;">
      <a class="action pdf" id="pdfDownloadLink" target="_parent" href="http://ojsserver.com/file.pdf" style="background: transparent url(http://ojsserver.com/lib/pkp/templates/images/structure/page_white_acrobat.png) no-repeat scroll 0 2px; padding: 3px 0 3px 23px; font-size: 1.2em; text-transform: none;">Download this PDF archive</a>
  </div>
   <div id="pdfCanvasContainer">
      <iframe style="min-height: 500px;" allowfullscreen="" webkitallowfullscreen="" src="http://ojsserver.com/plugins/generic/pdfJsViewer/pdf.js/web/viewer.html?file=http%3A%2F%2Fojsserver.com%2Ffile.pdf" width="100%" height="100%"></iframe>
   </div>
</div>

Regards

3 Likes
8

Hello people
In which file to put this code? It’s not working for me. I use OJS 3.1.1.4. I would like to embed the pdf on the page or view it on the page to obtain a result similar to the photo.PDF