2013-05-09 16 views
27

mam osadzania plików PDF za pomocą mniej więcej tak:Jak osadzić plik PDF z szerokością reagującego

<div class="graph-outline"> 
    <object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf"> 
    <embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" /> 
    </object> 
</div> 

To działa, ale chcę ustawić szerokość pdf dopasować szerokość elementu div. Obecnie wyświetla się jak element iframe z paskiem przewijania, więc aby wyświetlić cały plik pdf, należy przewinąć od prawej do lewej strony. Chcę, aby plik PDF pasował do szerokości kontenera.

Jak to naprawić? Wspieram IE8 i wyżej.

Oto jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

+0

możliwe duplikat [? Czy jest możliwe aby mieć plik PDF otwarty w predefiniowanym powiększeniu w programie Adobe Reader] (http://stackoverflow.com/questions/770473/to-to-można-mieć-plik-pdf-otwórz-na-predefiniowanym powiększeniu-w-adobe-re) –

+0

sprawdź poniższe odsyłacze: [SO - Q-> A] (http://stackoverflow.com/questions/770473/is-it-possible-to-have-a-pdf-file-open-at-a-predefined-magnification-in-adobe-re) i [parametry strony 6] (http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf) –

+0

@winner_jet: to metoda nie wpływa na przeglądarkę pdf w przeglądarkach – dashhund

Odpowiedz

0
<html> 
<head> 
<style type="text/css"> 
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;} 
</style> 
</head> 
<div id="wrapper"> 
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%"> 
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click 
here to download the PDF</a></p> 
</object> 
</div> 
</html> 
+2

Szybkość reakcji odnosi się do rzeczywistego pliku PDF wewnątrz obiektu pdf-viewer, a nie obiektu hostującego pdf-viewer – dashhund

13

tylko SIMPL to zrobić: -

<object data="resume.pdf" type="application/pdf" width="100%" height="800px"> 
    <p>It appears you don't have a PDF plugin for this browser. 
    No biggie... you can <a href="resume.pdf">click here to 
    download the PDF file.</a></p> 
</object> 
</div> 
+0

To działa dobrze, stworzone http://dabblet.com/gist/1cddeeb1cbc89f0a9061, aby przetestować to również, baw się z szerokością i wysokością – Carlton

2

zrobiłem ten błąd raz - osadzanie plików PDF na stronach HTML. Zasugeruję, abyś używał biblioteki JavaScript do wyświetlania zawartości pliku PDF. Takich jak https://github.com/mozilla/pdf.js/

+0

To nie jest perfekcyjne niestety . Ale wiele plików PDF, które wypróbowałem, wygląda okropnie z powodu problemu z czcionkami. (Chrome 38/Windows 7) – dakotapearl

5

Jeśli używasz Bootstrap 3, możesz użyć klasy embed-responsive i ustawić wysokość dopełnienia jako wysokość podzieloną przez szerokość plus trochę więcej dla pasków narzędzi. Na przykład, aby wyświetlić plik PDF 8,5 na 11, użyj 130% (11/8.5) i trochę więcej (20%).

<div class='embed-responsive' style='padding-bottom:150%'> 
    <object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object> 
</div> 

Oto CSS Bootstrap:

.embed-responsive { 
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden; 
}