Ik heb een automatisch gegenereerd PDF-bestand van itexten ik moet dat PDF-bestand in HTML weergeven. Mijn vraag is: Hoe kan ik een lokaal PDF-bestand in HTML weergeven met pdf.js? Moet dat PDF-bestand volgens bepaalde standaarden worden gegenereerd?
Antwoord 1, autoriteit 100%
Implementatie van een PDF-bestand in uw HTML-webpagina is heel eenvoudig.
<embed src="file_name.pdf" width="800px" height="2100px" />
Zorg ervoor dat u de breedte en hoogte aan uw behoeften aanpast.
Veel succes!
Antwoord 2, autoriteit 21%
Ik gebruik Google Docs insluitbare PDF-viewer. De documenten hoeven niet te worden geüpload naar Google Documenten, maar moeten wel online beschikbaar zijn.
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Antwoord 3, autoriteit 11%
1. Browser-native HTML inline embedding:
<embed
src="https://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="https://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
- Geen beperkingen voor de grootte van PDF-bestanden (zelfs honderden MB)
- Het is de snelste oplossing
Nadelen:
- Het werkt niet in mobiele browsers
2. Google Documenten-viewer:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
- Werkt op desktop en mobiele browser
Nadelen:
- 25 MB bestandslimiet
- Vereist extra tijd om viewer te downloaden
3. Andere oplossingen om PDF in te sluiten:
BELANGRIJKE OPMERKING:
Controleer de X-Frame-Options HTTP-antwoordheader. Het zou SAMEORIGIN moeten zijn.
X-Frame-Options SAMEORIGIN;
Antwoord 4, autoriteit 10%
Als je pdf.js wilt gebruiken, raad ik je aan DITte lezen
Je kunt je pdf ook ergens uploaden (zoals Google Drive) en de URL in een iframe gebruiken
of
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
Antwoord 5, autoriteit 5%
u kunt gemakkelijk weergeven op een html-pagina als deze
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">Antwoord 6, autoriteit 4%
In html-pagina voor pc is eenvoudig te implementeren
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
maar pdf tonen in mobiel door deze code is niet mogelijk je hebt een plug-in nodig
als u uw site niet responsive heeft. Dan wordt bovenstaande code pdf niet weergegeven op mobiel, maar u kunt de downloadoptie achter de code plaatsen
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
Antwoord 7, autoriteit 3%
Draagbaar documentformaat (PDF).
-
Elke browser « Gebruik _Insluitbare Google Document Viewerom het PDF-bestand in te sluiten in
iframe.<iframe src="https://docs.google.com/gview? url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"> </iframe> -
Alleen voor chromen browser «Chrome PDF-viewer met behulp van plug-in.
pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.<embed type="application/pdf" src="https://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
Voorbeeld Sippet:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="https://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="https://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="https://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="https://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>Antwoord 8, Autoriteit 3%
De eenvoudigste Way is om te gebruiken,
<iframe src="pdf-link">
</iframe>
En als het nog steeds wordt gedownload in plaats van te bekijken, controleer dan de koper van de serverrespons, het had moeten hebben, Content-Disposition:Inlineen niet, Content-Disposition:Attachment.
Antwoord 9, Autoriteit 2%
Het element wordt ondersteund door alle browsers en definieert een ingesloten object binnen een HTML-document.
Bottom line: object is goed, embed is oud. Naast de parametlabels van IE, zal elke inhoud tussen objecttags worden weergegeven als de browser de door de door de door de door de door de door de doorverwezen plug-in wordt ondersteund, en blijkbaar krijgt de inhoud HTTP aangevraagd, ongeacht of deze wordt weergegeven of niet. referentie
Werkende code: https://www.w3schools.com/code/tryit .asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>Antwoord 10, autoriteit 2%
Ik heb eerder iets soortgelijks gehad en gebruikte normaal tags
<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>
maar het is interessant om een aantal andere manieren te ontdekken zoals hierboven!
Antwoord 11
U kunt gebruiken
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
Of, als je het de hele pagina wilt laten beslaan:
<a href="your_pdf_file_path">Link</a>
Antwoord 12
Ik begrijp dat u HTML wilt weergeven, maar u kunt het PDF-bestand ook openen met php door het pad aan te wijzen en de browser zal het in een paar eenvoudige stappen weergeven
<?php
$your_file_name = "url_here";
//Content type and this case its a PDF
header("Content-type: application/pdf");
header("Content-Length: " . filesize($your_file_name ));
//Display the file
readfile($your_file_name );
?>