Как встроить программу просмотра PDF на страницу?

89

Если я не ошибаюсь, Google Docs предлагает средства для отображения PDF-файла, который хранится на том же сервере, что и веб-страница, через файл <iframe>, но мне нужно знать, как я могу сделать это кроссбраузерным способом.

Андрей Онига
источник

Ответы:

197

Вы можете рассмотреть возможность использования PDFObject Филипа Хатчисона.

В качестве альтернативы, если вы ищете решение, отличное от Javascript, вы можете использовать такую ​​разметку:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>
Ян Грегори
источник
Возможно, что-то изменилось с 2012 года, но если я использую этот подход, PDF автоматически загружается в Chrome и открывается во внешнем браузере.
Эгон Виллигхаген,
33

PDF.js - это технологический эксперимент HTML5, посвященный созданию точного и эффективного средства визуализации Portable Document Format (PDF) без помощи собственного кода. Он создан сообществом и поддерживается Mozilla Labs.

Вы можете увидеть демо здесь .

калечить
источник
16

Это могло бы работать немного лучше таким образом

<embed src= "MyHome.pdf" width= "500" height= "375">
DoesEatOats
источник
Это сработало для меня. Но мне также пришлось добавить атрибут type="application/pdf".
Ильяр Турдушев
9

Если я не ошибаюсь, OP спрашивал (хотя позже принял решение .js), будет ли встроенный сервер отображения PDF-файлов Google отображать PDF-файл на его собственном веб-сайте.

Итак, полтора года спустя: да, будет.

См. Http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Также см. Https://docs.google.com/viewer и вставьте URL-адрес файла, который вы хотите отобразить.

Изменить: перечитывая, OP просил решения, которые не используют iFrames. Я не думаю, что это возможно с программой просмотра Google.

Джон
источник
3

Обязательно протестируйте любое решение в различных предпочтениях Reader. Посетитель сайта может настроить свой браузер для открытия PDF-файла в Reader / Acrobat, а не в браузере, например, отключив плагин Acrobat в Firefox.

Я не могу быть уверен в своих результатах, потому что у меня есть два разных плагина Acrobat, которые Firefox распознает из-за того, что у меня разные версии Adobe Acrobat и Adobe Reader, но похоже, что вам, по крайней мере, нужно проверить, что произойдет, если посетитель веб-сайта в браузере установлен запрет на открытие PDF-файла в браузере. Это может сильно раздражать, когда они смотрят на то, что кажется вполне пригодной для использования веб-страницей, и их браузер требует от них открыть файл PDF, который, по их мнению, они не запрашивали. В некоторых случаях файл PDF самопроизвольно открывался в Adobe Reader, а не в браузере, а в других случаях браузер отображал диалоговое окно, в котором говорилось, что файл не существует.

Я столкнулся с такими несоответствиями с iframe и object, разные проблемы для разного кода.

Это для простого HTML-кода. Я не пробовал предлагаемые фреймворки.

Чарльз Белов
источник
1

Я бы действительно выбрал FlowPaper, особенно их новый режим Elements, который можно найти здесь: https://flowpaper.com/demo/

Он значительно сглаживает PDF-файлы, в то же время сохраняя четкость текста, что означает, что он будет загружаться намного быстрее на мобильных устройствах.

Робби
источник
1

используя bootstrap, вы можете получить адаптивный и мобильный файл, который сначала внедряется.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
Сина Риязи
источник
0

pdf2htmlEX от coolwanglu, вероятно, лучшее решение для преобразования pdf-файла в html. Вы можете выполнить простое преобразование, а затем встроить html-страницу как iframe или что-то подобное.

Dreizeiler
источник