Rendere scorrevole il PDF incorporato nell'iPad

Ho un PDF incorporato in HTML utilizzando il tag dell'oggetto. Il PDF incorporato è un grande documento e quando viene visualizzato dal mio desktop, il PDF viene visualizzato correttamente con la barra di scorrimento in tutti i browser, incluso il safari. Tuttavia, quando visualizzo la stessa pagina html in iPad, il PDF incorporato non ha una barra di scorrimento. C'è un modo in cui possiamo mostrare la barra di scorrimento in iPad per un documento PDF incorporato.Rendere scorrevole il PDF incorporato nell'iPad

Il codice utilizzato per embeding il formato PDF è

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

ho provato con iframe troppo e anche che non funziona.

fonte

2011-11-23 Albin Joseph

barre di scorrimento non sono di primo piano in iOS, sono semplicemente un indicatore di quanto sia stato selezionato attraverso un pezzo di contenuti, di non significa che lo scorrimento è possibile. –

@Albin: ha funzionato in ipad con scorrimento con un dito. Con due dita scorre il suo lavoro per me ...Si prega di trovare il link qui https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working – Krishna9960

Sul iPad è possibile utilizzare due dita per scorrere contenuto incorporato - questo funziona per div con overflow: scorrere

fonte

2011-11-25 17:26:25 Matt

Ma ancora le barre di scorrimento sono invisibili. C'è un modo in cui possiamo rendere visibili le barre di scorrimento in ipad? –

@Matt Qualsiasi idea per un dito scorri in ipad. Con due il suo funzionamento. Per riferimento qui è la mia domanda https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working – Krishna9960

Questo sembra funzionare:

rendere il tag oggetto abbastanza grande per mostrare l'intero PDF e
contenerlo in un div con altezza e overflow limitati: auto - add -webkit-overflow-scrolling in iOS 5+ per uno scrolling nativo valido.

Ecco il codice che ho usato:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PDF frame scrolling test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <style> 
     #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; } 
     object { width: 500px; height: 10000px } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <object id="obj" data="my.pdf" >object can't be rendered</object> 
    </div> 
    </body> 
</html>

fonte

2012-12-06 05:48:04

Ho provato questo approccio. Ma in iPad posso vedere solo l'immagine della prima pagina. Non riesco a scorrere – IfOnly

@IfOnly: hai trovato una soluzione? Si prega di condividere se hai risolto il problema. Sto affrontando lo stesso :( –

sfortunatamente no, invece ho fornito un collegamento al PDF e ho aperto il PDF in una vista separata – IfOnly

avevo bisogno la stessa cosa, ecco condivido.

problemi che ho affrontato:

contenuti ritagliata: iframe on iOS (iPad) content cropping issue
Barre di scorrimento non mostrati: Making embedded PDF scrollable in iPad
Non può fare larghezza

Si prega di provare quanto segue:

http://jsfiddle.net/aknMJ/2/embedded/result/

trucchi usati:

Leggi la larghezza del documento e scalare la cornice PDF in base a tale
"width: 100%" non funziona con iframe in iPad, quindi avevo bisogno di usare le trasformazioni CSS3
Attendere fino a quando il PDF non è stato completamente caricato e quindi mostrare & ridimensionare la cornice PDF. Altrimenti il contenuto è stato ritagliato.

$('#pdfFrame').hide(); 
var pdfFrame = document.getElementById('pdfFrame'); 
pdfFrame.contentWindow.location.replace(PDF_URL); 
$('#pdfFrame').on('load', function() { 
    $('#pdfFrame').show(); 
    var documentWidth = $(document).width() 
    var scale = (documentWidth/width) * 0.95; 
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")"); 
});

fonte

2013-09-09 13:30:38

mi sento come se avessi passato settimane con questo problema e ora sono così esausto, ma trovo una soluzione per me: $ ('# pdf_iframe'). css ("- webkit-transform", "scale (" + 1.63 + ")"); $ ('# pdf_iframe'). css ("zoom", " 0,63 ") La combinazione di queste due proprietà dopo che il pdf è stato caricato in modo dinamico riesce ad adattare correttamente la larghezza dei documenti pdf all'iPad.Se qualcuno vuole spiegazioni, sentitevi liberi di informarmi –

sulla questione scroll, purtroppo ma il lavoro soluzione è rendere fissa l'altezza di iframe e questa altezza deve essere uguale alla dimensione del pdf. –

sul mio primo commento - devi sperimentare con i valori per renderlo in forma. i valori nell'esempio funzionano solo per il mio caso, penso. –

pdf.js è perfettamente funzionante nel nostro caso.

È possibile controllare la soluzione di 1-linea completa qui: Make embedded PDF scrollable in iPad

Buona fortuna

fonte

2015-09-16 09:05:03 VanBoch

PDF.js causa perdite di memoria enormi su iOS, non è consigliabile utilizzarlo affatto. – Cenobyte321

Hai un'alternativa? Questa è l'unica soluzione di lavoro che abbiamo finora. – VanBoch

In iOS il tag

Rendere scorrevole il PDF incorporato nell'iPad

risposta

Problemi correlati