Posted in Html e PHP

Inserire un lettore pdf in una pagina web con pdf.js

admin
posted on 1 Dicembre 202027 Novembre 2020
No Comment

Ormai tutti i browser hanno un visualizzatore PDF integrato, ma potrebbe tornarvi utile mostrare un PDF all’interno di una porzione di pagina.

Per il browser compatibili con HTML5 si può usare il TAG object, ad esempio inserendo nella nostra pagina:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Test!</title>
  </head>
  <body style="font-family: Arial, Helvetica, sans-serif;">

    <div style="width:760px;">
      <h2>Vediamo come funziona</h2>
      <p>Di seguito un box con visualizzato il file pdf.</p>
        <div>
            <object data="/assets/my-pdf-file.pdf"></object>
        </div>

    </div>

  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h2>Vediamo come funziona</h2>

<p>Di seguito un box con visualizzato il file pdf.</p>

<div>

</div>

</body>

</html>

Se avete bisogno di personalizzare il visualizzatore o avete browser meno recenti tra i vostri visitatori, la soluzione più semplice è usare la libreria pdf.js, vediamo come.

Scaricare l’ultima versione stabile da git (il link “Stable” nella sezione “Download” sotto la colonna “Prebuilt. Estrarre l’archivio zip nella cartella pdf.js del vostro sito web (cercate di mantenere tutto ordinato, quindi poi scegliete il nome migliore per la vostra configurazione…).

A questo punto create una pagina web di esempio con questo codice:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Test!</title>
  </head>
  <body style="font-family: Arial, Helvetica, sans-serif;">

    <div style="width:760px;">
      <h2>Vediamo come funziona</h2>
      <p>Di seguito un box con visualizzato il file pdf.</p>
        <div>
            <iframe id="pdf-js-viewer" src="/pdf.js/web/viewer.html?file=../../assets/my-pdf-file.pdf" title="webviewer" frameborder="0" width="500" height="600"></iframe>
        </div>

    </div>

  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h2>Vediamo come funziona</h2>

<p>Di seguito un box con visualizzato il file pdf.</p>

<div>

</div>

</body>

</html>

L’esempio fa riferimento al file PDF in assets/my-pdf-file.pdf.

Possiamo anche personalizzare il nostro visualizzatore. Modifichiamo il file pdf.js/web/viewer.html ed aggiungiamo:

<script src="customToolbar.js"></script>

1	<script src="customToolbar.js"></script>

Poi creiamo il file pdf.js/web/customToolbar.js ed inseriamo:

let sheet = (function() {
  let style = document.createElement("style");
  style.appendChild(document.createTextNode(""));
  document.head.appendChild(style);
  return style.sheet;
 })();
 function editToolBar(){
  //when the page is resized, the viewer hides and move some buttons around.
  //this function forcibly show all buttons so none of them disappear or re-appear on page resize
  removeGrowRules();

  /* Reorganizing the UI 
   the 'addElemFromSecondaryToPrimary' function moves items from the secondary nav into the primary nav
   there are 3 primary nav regions (toolbarViewerLeft, toolbarViewerMiddle, toolbarViewerRight) 
  */

  //adding elements to left part of toolbar
  addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')
  addElemFromSecondaryToPrimary('pageRotateCw', 'toolbarViewerLeft')
  addElemFromSecondaryToPrimary('zoomIn', 'toolbarViewerLeft')
  addElemFromSecondaryToPrimary('zoomOut', 'toolbarViewerLeft')

  //adding elements to middle part of toolbar
  addElemFromSecondaryToPrimary('previous', 'toolbarViewerMiddle')
  addElemFromSecondaryToPrimary('pageNumber', 'toolbarViewerMiddle')
  addElemFromSecondaryToPrimary('numPages', 'toolbarViewerMiddle')
  addElemFromSecondaryToPrimary('next', 'toolbarViewerMiddle')

  //adding elements to right part of toolbar
  addElemFromSecondaryToPrimary('secondaryOpenFile', 'toolbarViewerRight')

  /* Changing icons */
  changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')
  changeIcon('next', 'icons/baseline-navigate_next-24px.svg')
  changeIcon('pageRotateCcw', 'icons/baseline-rotate_left-24px.svg')
  changeIcon('pageRotateCw', 'icons/baseline-rotate_right-24px.svg')
  changeIcon('viewFind', 'icons/baseline-search-24px.svg');
  changeIcon('zoomOut', 'icons/baseline-zoom_out-24px.svg')
  changeIcon('zoomIn', 'icons/baseline-zoom_in-24px.svg')
  changeIcon('sidebarToggle', 'icons/baseline-toc-24px.svg')
  changeIcon('secondaryOpenFile', './icons/baseline-open_in_browser-24px.svg')

  /* Hiding elements */
  removeElement('secondaryToolbarToggle')
  removeElement('scaleSelectContainer')
  removeElement('presentationMode')
  removeElement('openFile')
  removeElement('print')
  removeElement('download')
  removeElement('viewBookmark')
 }
 function changeIcon(elemID, iconUrl){
  let element = document.getElementById(elemID);
  let classNames = element.className;
  classNames = elemID.includes('Toggle')? 'toolbarButton#'+elemID :
 classNames.split(' ').join('.');
  classNames = elemID.includes('view')? '#'+elemID+'.toolbarButton' : '.'+classNames
  classNames+= "::before";
  addCSSRule(sheet, classNames, `content: url(${iconUrl}) !important`, 0)
 }
 function addElemFromSecondaryToPrimary(elemID, parentID){
  let element = document.getElementById(elemID);
  let parent = document.getElementById(parentID);
  element.style.minWidth = "0px";
  element.innerHTML =''
  parent.append(element);
 }
 function removeElement(elemID){
  let element = document.getElementById(elemID);
  element.parentNode.removeChild(element);
 }
 function removeGrowRules(){
  addCSSRule(sheet, '.hiddenSmallView *', 'display:block !important');
  addCSSRule(sheet, '.hiddenMediumView', 'display:block !important');
  addCSSRule(sheet, '.hiddenLargeView', 'display:block !important');
  addCSSRule(sheet, '.visibleSmallView', 'display:block !important');
  addCSSRule(sheet, '.visibleMediumView', 'display:block !important');
  addCSSRule(sheet, '.visibleLargeView', 'display:block !important');
 }
 function addCSSRule(sheet, selector, rules, index) {
  if("insertRule" in sheet) {
  sheet.insertRule(selector + "{" + rules + "}", index);
  }
  else if("addRule" in sheet) {
  sheet.addRule(selector, rules, index);
  }
 }
 window.onload = editToolBar

let sheet = (function() {

let style = document.createElement("style");

style.appendChild(document.createTextNode(""));

document.head.appendChild(style);

return style.sheet;

})();

function editToolBar(){

//when the page is resized, the viewer hides and move some buttons around.

//this function forcibly show all buttons so none of them disappear or re-appear on page resize

removeGrowRules();

/* Reorganizing the UI

the 'addElemFromSecondaryToPrimary' function moves items from the secondary nav into the primary nav

there are 3 primary nav regions (toolbarViewerLeft, toolbarViewerMiddle, toolbarViewerRight)

//adding elements to left part of toolbar

addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')

addElemFromSecondaryToPrimary('pageRotateCw', 'toolbarViewerLeft')

addElemFromSecondaryToPrimary('zoomIn', 'toolbarViewerLeft')

addElemFromSecondaryToPrimary('zoomOut', 'toolbarViewerLeft')

//adding elements to middle part of toolbar

addElemFromSecondaryToPrimary('previous', 'toolbarViewerMiddle')

addElemFromSecondaryToPrimary('pageNumber', 'toolbarViewerMiddle')

addElemFromSecondaryToPrimary('numPages', 'toolbarViewerMiddle')

addElemFromSecondaryToPrimary('next', 'toolbarViewerMiddle')

//adding elements to right part of toolbar

addElemFromSecondaryToPrimary('secondaryOpenFile', 'toolbarViewerRight')

/* Changing icons */

changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')

changeIcon('next', 'icons/baseline-navigate_next-24px.svg')

changeIcon('pageRotateCcw', 'icons/baseline-rotate_left-24px.svg')

changeIcon('pageRotateCw', 'icons/baseline-rotate_right-24px.svg')

changeIcon('viewFind', 'icons/baseline-search-24px.svg');

changeIcon('zoomOut', 'icons/baseline-zoom_out-24px.svg')

changeIcon('zoomIn', 'icons/baseline-zoom_in-24px.svg')

changeIcon('sidebarToggle', 'icons/baseline-toc-24px.svg')

changeIcon('secondaryOpenFile', './icons/baseline-open_in_browser-24px.svg')

/* Hiding elements */

removeElement('secondaryToolbarToggle')

removeElement('scaleSelectContainer')

removeElement('presentationMode')

removeElement('openFile')

removeElement('print')

removeElement('download')

removeElement('viewBookmark')

}

function changeIcon(elemID, iconUrl){

let element = document.getElementById(elemID);

let classNames = element.className;

classNames = elemID.includes('Toggle')? 'toolbarButton#'+elemID :

classNames.split(' ').join('.');

classNames = elemID.includes('view')? '#'+elemID+'.toolbarButton' : '.'+classNames

classNames+= "::before";

addCSSRule(sheet, classNames, `content: url(${iconUrl}) !important`, 0)

}

function addElemFromSecondaryToPrimary(elemID, parentID){

let element = document.getElementById(elemID);

let parent = document.getElementById(parentID);

element.style.minWidth = "0px";

element.innerHTML =''

parent.append(element);

}

function removeElement(elemID){

let element = document.getElementById(elemID);

element.parentNode.removeChild(element);

}

function removeGrowRules(){

addCSSRule(sheet, '.hiddenSmallView *', 'display:block !important');

addCSSRule(sheet, '.hiddenMediumView', 'display:block !important');

addCSSRule(sheet, '.hiddenLargeView', 'display:block !important');

addCSSRule(sheet, '.visibleSmallView', 'display:block !important');

addCSSRule(sheet, '.visibleMediumView', 'display:block !important');

addCSSRule(sheet, '.visibleLargeView', 'display:block !important');

}

function addCSSRule(sheet, selector, rules, index) {

if("insertRule" in sheet) {

sheet.insertRule(selector + "{" + rules + "}", index);

}

else if("addRule" in sheet) {

sheet.addRule(selector, rules, index);

}

window.onload = editToolBar

e poi personalizzare lo script come preferite, è abbastanza intuitivo.

Infine, se dovesse servire creare un sistema che permetta la modifica del pdf, l’inserimento dati in un modulo, firmarlo, etc, consiglio di valutare pdfjs.express.

enjoy!

Ti interessa acquistare un dominio a prezzi ultraconvenienti? clicca qui

Se hai trovato utili le informazioni su questo blog,
Fai una donazione!
Clicca sul bottone qui sotto o almeno clicca sul banner pubblicitario 🙂

SMsoft – informatica e dintorni

Inserire un lettore pdf in una pagina web con pdf.js

« Debian 10 (Buster): Installare libmysqlclient-dev

Un firewall per MacOS? »

admin

Commenta