Вставить PDF в HTML5

Question

Вставить PDF в HTML5

35

Я пытаюсь встроить PDF в HTML-документ, но, похоже, это работает только с Chrome. Другие браузеры, похоже, требуют плагинов или требуют, чтобы пользователь щелкнул ссылку, которая не является тем, что я хочу. Вот что я пробовал:

<object data="pdfFiles/interfaces.pdf" type="application/pdf">
                <embed src=" pdfFiles/interfaces.pdf" type="application/pdf">&nbsp; </embed>
                    alt :<a href="pdfFiles/interfaces.pdf">
                </object>

Vuk Vasić 04 фев. 2013, в 17:14

Источник

0

alt tag только для текстовых целей
user2008608 04 фев. 2013, в 15:34
1

Для отображения PDF-файлов на веб-страницах вам необходим плагин. Просто у Chrome есть один встроенный.
Rocket Hazmat 04 фев. 2013, в 15:36
0

Есть ли причина, по которой вы не просто добавляете гиперссылку? например, <a href="pdfFiles/interfaces.pdf">Relais D2D</a>
scunliffe 04 фев. 2013, в 15:36
0

@scunliffe Мне не нужна гиперссылка, поскольку я просто хотел, чтобы пользователь открыл PDF-файл в браузере с PDF-файлом, встроенным в другую страницу.
user2008608 04 фев. 2013, в 15:38
0

@RocketHazmat RocketHazmat .. спасибо за информацию, но есть ли способ обойти?
user2008608 04 фев. 2013, в 15:39
0

@Aamir: Аамир: Нет. Вы не можете отобразить PDF внутри страницы, если у пользователя не установлен плагин для этого. Ну, вы можете попробовать pdf.js , но я никогда не использовал его, поэтому я не уверен, как это сделать.
Rocket Hazmat 04 фев. 2013, в 15:41

Показать ещё 4 комментария

Теги:

html

html5

pdf

embed

6 ответов

Ещё вопросы

Для отображения PDF-файлов на веб-страницах вам необходим плагин. Просто у Chrome есть один встроенный.
Есть ли причина, по которой вы не просто добавляете гиперссылку? например, <a href="pdfFiles/interfaces.pdf">Relais D2D</a>
@scunliffe Мне не нужна гиперссылка, поскольку я просто хотел, чтобы пользователь открыл PDF-файл в браузере с PDF-файлом, встроенным в другую страницу.
@RocketHazmat RocketHazmat .. спасибо за информацию, но есть ли способ обойти?
@Aamir: Аамир: Нет. Вы не можете отобразить PDF внутри страницы, если у пользователя не установлен плагин для этого. Ну, вы можете попробовать pdf.js , но я никогда не использовал его, поэтому я не уверен, как это сделать.

Vuk Vasić · Answer 1 · 2013-02-04T17-10-00.000Z

Вот код, который вы можете использовать для каждого браузера:

<embed src="pdfFiles/interfaces.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Протестировано на firefox и chrome

Он будет работать в IE 10, если у вас установлен плагин Adobe Acrobat Reader / Reader.

John Foley · Answer 2 · 2015-04-28T16-38-00.000Z

45

<iframe src="http://docs.google.com/gview?url=http://domain.com/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

Документы Google позволяют встраивать PDF файлы, документы Microsoft Office и другие приложения, просто связываясь с их услугами с помощью iframe. Его удобный, универсальный и привлекательный.

John Foley 28 апр. 2015, в 16:38

6

ИМХО это лучший ответ. Получивший наибольшее количество голосов будет зависеть от браузера и будет использовать доступный плагин. С помощью Google Viewer, постоянный опыт гарантирован.
Shaunak 01 фев. 2016, в 18:22
5

Обратите внимание, что это, вероятно, работает, только если рассматриваемый файл не находится за паролем или другим видом стены.
starbeamrainbowlabs 06 апр. 2016, в 14:30
11

Это плохо, если вы находитесь в интрасети без доступа в интернет.
CesarD 21 май 2016, в 09:42
5

Я не понимаю, как собственное решение является лучшим ответом. Если вам нужно работать на устройстве, которое не имеет доступа к документам Google, вам просто не повезло ... Назад в времена IBM ...
Gi1ber7 01 июнь 2017, в 18:14
4

Не стоит, когда PDF должен оставаться закрытым ... что, вероятно, покрывает большинство случаев использования, если не значительную часть.
David Simic 26 сен. 2018, в 00:47

Показать ещё 3 комментария

Fahad Uddin · Answer 3 · 2016-05-09T15-56-00.000Z

12

Это прекрасно работает, и это официальный HTML5.

<object data="https://link-to-pdf"></object>

Fahad Uddin 09 май 2016, в 15:56

1

не работает в IE
Mark 11 нояб. 2016, в 11:20
18

Говоря об IE, важно указать версию.
user2867288 15 дек. 2016, в 17:59
1

На мобильном Chrome я получаю «Этот плагин не поддерживается» при использовании этого. Прекрасно работает на настольном Chrome. (обе версии 62)
jdf 10 нояб. 2017, в 23:29
0

это работает в IE11 +
Paul Brunache 03 апр. 2018, в 23:47
0

Не работает на мобильном телефоне (хром)
Microsmsm 03 сен. 2018, в 23:30
0

Я попробовал это, но в моем случае это не работает. Я думаю, что проблема здесь не в объекте, встраивании или в фрейме.
Hoang Tran Son 29 апр. 2019, в 10:02

Показать ещё 4 комментария

Herbert Pimentel · Answer 4 · 2017-03-07T00-20-00.000Z

Знаете ли вы о http://mozilla.github.io/pdf.js/, это проект mozila для рендеринга pdf внутри вашего html с использованием холста. он очень прост в использовании.

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

Chris Peters · Answer 5 · 2013-02-04T18-17-00.000Z

Я рекомендую использовать PDFObject для обнаружения плагинов PDF.

Это позволит вам отображать альтернативный контент, если браузер пользователя не способен отображать PDF напрямую. Например, PDF будет отображаться в Chrome для большинства пользователей, но для них потребуется плагин, такой как Adobe Reader, если он использует Firefox или Internet Explorer.

Как минимум PDFObject позволит вам отображать сообщение со ссылкой для загрузки Adobe Reader и/или самого файла PDF, если их браузер еще не имеет плагина PDF.

PS Теперь у Firefox теперь есть встроенная программа для чтения PDF.

Rob Z · Answer 6 · 2013-10-03T04-54-00.000Z

FlexPaper, вероятно, по-прежнему остается лучшим зрителем, который можно использовать для такого рода вещей. У этого есть традиционный зритель и больше просмотра страницы/флип-книжного стиля как в flash, так и в html5

http://flexpaper.devaldi.com

Теперь это FlowPlayer, и он имеет значительные ограничения (например, ограничение в 10 страниц) для их бесплатной версии: flowpaper.com/download