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>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>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>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 = editToolBare 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 🙂
Commenta