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

Question

Каков рекомендуемый способ встраивания PDF в HTML?

• плавающий фрейм?
• Объект?
• Код

Что Adobe говорит об этом сама?

В моем случае PDF-файл создается на лету, поэтому его нельзя загрузить в стороннее решение до его очистки.

Answer 1

Scribd больше не требует от вас размещения ваших документов на их сервере. Если вы создадите учетную запись с ними, чтобы получить идентификатор издателя. Для загрузки файлов PDF, хранящихся на вашем собственном сервере, требуется всего несколько строк кода JavaScript.

Подробнее см. Инструменты разработчика .

Answer 2

PdfToImageServlet с помощью команды ImageMagick convert.

Пример использования: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

Answer 3

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

Answer 4

Один из вариантов, который вы должны рассмотреть, это Известный PDF
У него есть бесплатный план, если вы не планируете проводить онлайн-совместную работу в режиме реального времени на pdfs

Добавьте следующее iframe в любой HTML и наслаждайтесь результатами:

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

Answer 5

Для потоковой передачи файла в браузер см. Вопрос переполнения стека Как передать PDF-файл как двоичный файл в браузер с помощью .NET 2.0 - обратите внимание, что с небольшими изменениями это должно работать независимо от того, обслуживаете ли вы файл из файловой системы или динамически генерируемый.

С учетом вышесказанного, в статье MSDN, на которую делается ссылка, довольно упрощенное представление о мире, поэтому вы можете прочитать Успешно транслировать PDF в браузер через HTTPS , а также для некоторых заголовков, которые вам могут понадобиться.

При таком подходе iframe, вероятно, лучший путь. Создайте одну веб-форму для потоковой передачи файла, а затем поместите iframe на другую страницу с атрибутом src, установленным на первую форму.

Answer 6

Так я и поступил с 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>

Answer 7

1. Создание BLOB-объекта входных PDF-байтов
2. Используйте iframe и PDF.js с патчами для этого кросс-браузера Обойти

URI для iframe должен выглядеть примерно так:

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

Теперь FF, Chrome, IE 11 и Edge отображают PDF-файл в средстве просмотра в iframe, переданном через URL-адрес стандартного BLOB-объекта в URL.

Answer 8

Я обнаружил, что это прекрасно работает, и браузер обрабатывает его в Firefox. Я не проверял IE ...

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

Answer 9

Если вы не хотите самостоятельно размещать PDF.JS, вы можете попробовать DocDroid . Это похоже на Google Drive PDF Viewer, но позволяет настраивать брендинг.