Рекомендований спосіб вставлення PDF у HTML?

Який рекомендований спосіб вставити PDF в HTML?

• iFrame?
• Об'єкт?
• Вставити?

Що про це говорить сам Adobe?

У моєму випадку PDF формується на ходу, тому його не можна завантажувати до стороннього рішення перед його промиванням.

Можливо, найкращим підходом є використання бібліотеки PDF.JS. Це чистий HTML5 / JavaScript- рендер для документів PDF без будь-яких сторонніх плагінів.

Демонстрація в Інтернеті: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

Це швидко, легко, до речі і не вимагає сторонніх сценаріїв:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

ОНОВЛЕННЯ (1/2018):

Веб-переглядач Chrome на Android більше не підтримує вбудовування PDF. Ви можете обійти це за допомогою засобу перегляду PDF на Диску Google

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

Ви також можете використовувати Google Viewer Google PDF для цієї мети. Наскільки я знаю, це не офіційна функція Google (я помиляюся в цьому?), Але вона працює для мене дуже красиво і плавно. Вам потрібно завантажити де-небудь раніше і просто скористатися його URL-адресою:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Важливо те, що йому не потрібен програвач Flash, він використовує JavaScript.

Ви маєте певний контроль над тим, як PDF відображається в браузері, передаючи деякі параметри в рядку запиту. Я був радий цій роботі, поки не зрозумів, що це не працює в IE8. :(

Він працює в Chrome 9 та Firefox 3.6, але в IE8 відображається повідомлення "Вставте своє повідомлення про помилку, якщо PDF не може бути відображений".

Я ще не перевіряв старіші версії жодного з перерахованих вище браузерів. Але ось у мене все-таки є випадок, якщо він комусь допомагає. Це встановлює масштаб 85%, видаляє смуги прокрутки, панелі інструментів та панелі навігації. Я оновлю свій пост, якщо я також натраплю на щось, що працює в IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

Використання обох <object>і <embed>надасть вам ширшу сумісність браузера.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

Перетворіть його в PNG за допомогою ImageMagick та виведіть на нього PNG (швидко та брудно).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Це хороший варіант, якщо вам потрібно швидке рішення, хочете уникнути проблем із переглядом PDF між веб-браузерами та якщо PDF - це лише сторінка чи дві. Звичайно, вам потрібно встановити ImageMagick (який, у свою чергу, потребує Ghostscript) на вашому веб-сервері, що може бути недоступним у спільних хостинг-середовищах. Існує також плагін PHP (званий imagick), який працює так, але він має свої особливі вимоги.

Погляньте на цей код - Вбудовувати PDF у HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

FDView поєднує PDF2SWF (який базується на xpdf ) та SWF перегляду щоб ви могли конвертувати та вбудовувати PDF-документи влітку на своєму сервері.

xpdf не є ідеальним конвертором PDF. Якщо вам потрібні кращі результати, тоді Ghostview має певну можливість конвертувати PDF-документи в інші формати, для яких, можливо, ви зможете легше створити переглядач Flash.

Але для простих документів PDF FDView має працювати досить добре.

Наша проблема полягає в тому, що з юридичних причин нам заборонено тимчасово зберігати PDF на жорсткому диску . Крім того, не слід перезавантажувати всю сторінку під час відображення PDF у форматі попереднього перегляду в браузері.

Спочатку ми спробували PDF.jS. Він працював з Base64 у програмі перегляду Firefox та Chrome. Однак для нашого PDF це було неприпустимо повільно. IE / Edge взагалі не працював.

Тому ми спробували його з рядком Base64 у тезі HTML-об’єкта. Це знову не спрацювало для IE / Edge (можливо, така ж проблема, як і для PDF.js). У Chrome / Firefox / Safari знову немає проблем. Тому ми обрали гібридне рішення. IE / Edge ми використовуємо IFrame, а для всіх інших браузерів - тег об'єктів.

Рішення IFrame, звичайно, також буде працювати для Chrome і co. Причина, чому ми не використали це рішення для Chrome, полягає в тому, що, хоча PDF відображається правильно, Chrome робить новий запит на сервер, як тільки ви натискаєте кнопку "завантажити" у попередньому перегляді . Обов’язковий прихованим полем pdfHelperTransferData в (для надсилання даних форми, необхідні для генерації PDF) більше не встановлені, оскільки PDF відображається в IFrame. Про цю функцію / помилку дивПід час завантаження PDF Chrome надсилає два запити (і скасовує один з них) .

Зараз проблемні діти IE9 та IE10 залишаються. Для цього ми відмовились від рішення для попереднього перегляду та просто надіслали документ, натиснувши кнопку попереднього перегляду як завантаження користувачеві (замість попереднього перегляду). Ми багато пробували, але навіть якби ми знайшли рішення, додаткові зусилля для цієї крихітної частини користувачів не були б варті зусиль. Ви можете знайти наше рішення для завантаження тут: Завантажте PDF без оновлення за допомогою IFrame .

Наш Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Наш HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Щоб перевірити тип браузера на IE / Edge, див. Тут: Як я можу виявити Internet Explorer (IE) та Microsoft Edge за допомогою JavaScript? Сподіваюся, ці висновки заощадять комусь інший час.

1. Створіть контейнер для зберігання Вашого PDF

   <div id="example1"></div>

2. Скажіть PDFObject, який PDF вбудувати та куди його вставити

   <script src="/js/pdfobject.js"></script>
   <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. Ви можете додатково використовувати CSS для визначення візуального стилю, включаючи розміри, облямівку, поля тощо.

   <style>
   .pdfobject-container { height: 500px;}
   .pdfobject { border: 1px solid #666; }
   </style>

джерело: https://pdfobject.com/

Ви можете використовувати відносне розташування збереженого формату PDF так:

Приклад1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Приклад2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

Scribd більше не вимагає від вас розміщення документів на їх сервері. Якщо ви створите обліковий запис у них, ви отримаєте ідентифікатор видавця. Для завантаження файлів PDF, що зберігаються на вашому власному сервері, потрібно лише кілька рядків коду JavaScript.

Докладніше див. Інструменти для розробників .

<object width="400" height="400" data="helloworld.pdf"></object>

PdfToImageServlet за допомогою convertкоманди ImageMagick .

Приклад використання: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

Так я зробив з AXIOS та Vue.js :

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

динамічно додайте urlPDF до HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

Один із варіантів, який слід врахувати, - це помітний PDF.
Він має вільний план, якщо ви не плануєте здійснювати онлайн-співпрацю в режимі реального часу на pdfs

Вставте наступне iframeу будь-який html та насолоджуйтесь результатами:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

Щоб передати файл у веб-переглядач, див. Запитання про переповнення стека. Як передавати файл PDF у вигляді двійкового до браузера за допомогою .NET 2.0 - зауважте, що при незначних варіаціях це має працювати, чи подаєте ви файл з файлової системи або динамічно генерується.

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

Використовуючи такий підхід, iframe - це, мабуть, найкращий шлях. Майте одну веб-форму, яка передає файл, а потім поставте iframe на іншу сторінку з srcатрибутом, встановленим у першій формі.

1. Побудуйте крапку вхідних байтів PDF
2. Використовуйте параметр iframe та PDF.js, виправлений із цим вирішенням перехресного веб-переглядача

URI для iframe повинен виглядати приблизно так:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Тепер FF, Chrome, IE 11 та Edge всі відображають PDF у переглядачі в iframe, що передається через стандартний URI-код блобу в URL-адресі.

Якщо ви не хочете розміщувати PDF.JS самостійно, ви можете спробувати DocDroid . Він схожий на переглядач файлів PDF на Диску Google, але дозволяє користуватися брендом.

Мені довелося переглядати PDF з React, тому після спробу декількох бібліотек моїм оптимальним рішенням було отримання даних та передавання їх по електронній пошті.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

Я виявив, що це працює чудово, і браузер обробляє його у firefox. Я не перевірив IE ...

<script>window.location='url'</script>