Як вбудувати переглядач PDF на сторінку?

Якщо я не помиляюся, Google Docs пропонує засоби для відображення PDF-файлу, який зберігається на тому ж сервері, що і веб-сторінка, через <iframe>, але мені потрібно знати, як я можу це зробити крос-браузерним способом.

Ви можете розглянути можливість використання 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>

PDF.js - це експеримент з технологією HTML5, який досліджує створення вірного та ефективного візуалізатора портативного формату документа (PDF) без допомоги власного коду. Він керується громадою та підтримується Mozilla Labs.

Демонстрацію ви можете побачити тут .

Таким чином, це може працювати трохи краще

<embed src= "MyHome.pdf" width= "500" height= "375">

Якщо я не помиляюся, 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.

спробуйте Flex Paper http://flexpaper.devaldi.com/

це працює як scribd

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

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

Я стикався з такими невідповідностями з iframe і об'єктом, і різні проблеми для іншого коду.

Це для простого HTML-коду. Я не пробував запропоновані рамки.

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

Це значно згладжує PDF-файли одночасно із збереженням чіткості тексту, а це означає, що він завантажується набагато швидше на мобільних пристроях

за допомогою завантажувального файлу ви можете отримати адаптивний та мобільний перший вбудований файл.

<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>

pdf2htmlEX від coolwanglu - це, мабуть, найкраще рішення для перетворення PDF-файлу в html. Ви можете виконати просте перетворення, а потім вставити HTML-сторінку як iframe або щось подібне.