2013-08-21 23 views
12

Per chiarire, lo strumento manuale è una funzione che consente all'utente di fare clic sul pdf e di trascinarlo, utilizzato per sostituire la barra di scorrimento in navigazione.Come aggiungere una funzione di mano (afferrare la pagina e trascinare) su Chrome e Firefox PDF viewer?

Il problema è, per impostazione predefinita, il visualizzatore pdf di Chrome e Firefox non ha questa funzione e vorrei consentire all'utente di trascinare la pagina.

Una soluzione alternativa consiste nell'utilizzare una libreria JavaScript (Grab to Pan https://github.com/Rob--W/grab-to-pan.js nel mio caso) con un oggetto embed (visualizzatore PDF). Quando massimo la dimensione del pdf e dell'utente trascinare l'oggetto incorporato.

Il problema che ho incontro è

  1. Quando si utilizza Chrome/Firefox, il contenuto PDF non si adattano alla pagina, ma Ridimensionamento automatico di default anche io ho posto il parametro aperto Adobe PDF, tramite iframe.

  2. Il codice JavaScript sembra essere in conflitto con il visualizzatore PDF di Firefox, funziona senza problemi su Chrome ma non su Firefox.

Ecco il codice sorgente, è possibile scaricare la libreria dal collegamento di cui sopra e dare un'occhiata. Non dimenticare di inserire un file "1.pdf" insieme al file sorgente.

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title>Grab-to-pan.js demo</title> 
<link rel="stylesheet" href="grab-to-pan.css" type="text/css"> 
<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.scrollable { 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    background-color: #EEE; 
} 
#zoomPage { 
    overflow:visible; 
    width: 100%; 
    height: 150%; 
} 
</style> 
</head> 
<body> 
<label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label> 
<div class="scrollable" id="scrollable-container"> 
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object> 
</div> 
<script src="grab-to-pan.js"></script> 
<script> 
document.getElementById('activate-g2p').onchange = function() { 
    if (this.checked) g2p.activate(); 
    else g2p.deactivate(); 
}; 

var scrollableContainer = document.getElementById('scrollable-container'); 
var g2p = new GrabToPan({ 
    element: scrollableContainer 
}); 
g2p.activate(); 

</script> 
</body> 
</html> 
+0

È possibile utilizzare altri plugin di trascinamento jquery per sostituire quello originale. – user782104

+0

puoi creare un violino per il modello di lavoro corrente .. – MarmiK

+0

vuoi dire che vuoi spostare l'oggetto che contiene PDF o una pagina di PDF? – MarmiK

risposta

5

Non credo che sia possibile. Il pdf viene caricato come oggetto incorporato.
Supponendo che si stia sviluppando un'applicazione Web, è possibile utilizzare pdf.js per caricare/visualizzare documenti PDF con il proprio codice JavaScript o utilizzando il proprio visualizzatore. In questo modo non dovrai preoccuparti dell'implementazione del browser per il caricamento dei documenti pdf e potrai giocare con lo spettatore secondo le tue esigenze.

Spero che questo aiuti.

+0

Grazie. Ma come posso impostare pdf .js come visualizzatore predefinito per il browser di tutti i visitatori? Finora provo ad usare il PDF.js su chrome funziona solo quando il plugin dell'estensione è installato e clicca su un link pdf. Grazie – user782104

+0

Come ho detto, non puoi. PDF.js non è un'applicazione, è disponibile come estensione/plugin per firefox e chrome. Inoltre come una libreria per gli sviluppatori. –

2

Se si desidera consentire all'utente di utilizzare qualsiasi visualizzatore PDF che hanno configurato, non è possibile aggiungere funzioni a quel visualizzatore. Se si desidera controllare il funzionamento del visualizzatore, è necessario fornire da soli. Questo è molto o una/o situazione. Il tentativo di mescolare i due non porterà a buoni risultati. Google e Mozilla sono liberi di cambiare i loro visualizzatori di PDF senza dare alcun pensiero al tuo sito.

Come accennato in precedenza, è possibile incorporare PDF.js nel proprio sito Web, seguendo le istruzioni allo https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. Non so se il supporto PDF di questo viewer è abbastanza buono per il tuo scenario, ma puoi sicuramente testarlo. Poiché il codice PDF.js è ospitato sul tuo sito e quindi sotto il tuo controllo, potresti essere in grado di modificarlo come meglio credi.