Як можна відобразити PDF-файл у веб-браузері на сторінці .html?
Відповіді:
Я використовую вбудований переглядач PDF-файлів Google Docs. Документи не потрібно завантажувати в Google Docs, але вони повинні бути доступні в Інтернеті.
<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
замість використання iframe та залежно від третьої сторони, подумайте про використання flexpaper або pdf.js.
Я використовував PDF.js , він у мене чудово працює. Ось демонстрація .
бажано використовувати тег об'єкта
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
зауважте, що ви можете змінити ширину та висоту на будь-яке значення, яке, будь ласка, відвідайте http://www.w3schools.com/tags/tag_object.asp
Найпростіший спосіб - створити iframe і встановити для джерела URL-адресу PDF.
(качки божевільні HTML-дизайнери) Зробив це сам, чудово працює, перехресний браузер (заповзає в бункер).
Плагін браузера керує цими налаштуваннями, тому ви не можете його примусити. Однак ви можете зробити просту <a href="whatver.pdf">замість <a href="whatever.pdf" target="_blank">.
Поки ви розміщуєте PDF, атрибут target - це шлях. Іншими словами, для відносних файлів використання атрибута target зі значенням _blank буде чудово працювати.
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Для абсолютних шляхів двигуни будуть йти до U nified R esource L ocator і відкрити їх. Отже, придушити атрибут target.
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
В обох випадках браузери зможуть добре попрацювати.
Ви також можете вставляти, використовуючи JavaScript, через стороннє рішення, таке як PDFObject .
Ви можете використовувати цей код:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Або скористайтеся вбудованим засобом перегляду PDF-файлів Google Docs:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
Ви також можете застосувати такий простий підхід GoogleDoc.
<a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>
Це створило б нову сторінку для перегляду документа без спотворення потоку.
Просте рішення полягає в тому, щоб помістити його у фрейм і сподіватися, що у користувача є плагін, який його підтримує.
(Ні, плагін Acrobat був настільки ресурсним джерелом та джерелом нестабільності, що я хотів би видалити його з будь-якого браузера, до якого він торкається).
Складне, але відносно популярне рішення - відобразити його у флеш-аплеті.
Ми відображаємо сторінки файлів PDF як файли PNG на сервері за допомогою JPedal (бібліотеки Java). Це в поєднанні з деяким javascript дає нам високий контроль над візуалізацією та навігацією.
Нещодавно мені потрібно було надати більш зручну для мобільних пристроїв адаптивну версію документа .pdf, оскільки вузькі екрани телефону вимагали великої прокрутки вправо та вліво. Щоб дозволити лише вертикальну прокрутку та уникнути горизонтальної прокрутки, для мене працювали наступні кроки:
Результат виглядав добре і був придатний як для настільних ПК, так і для мобільних пристроїв.
Відображення вмісту, збереженого у форматі файлу PDF / DOC / DOCX , ідеально підходить для відображення файлу pdf / doc / docx на вашій веб-сторінці
Ви пробували використовувати простий тег img?
<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">