Как отобразить поток PDF в браузере с помощью javascript

Я обращаюсь к существующей веб-службе WCF (которая возвращает PDF как поток байтов) с использованием jQuery ajax-методов.

Когда вызов службы завершается, я получаю переменную javascript, содержащую PDF (переменная содержит двоичные данные, начиная с "% PDF-1.4..." ).

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

Мои исследования пока показывают, что я мог бы добиться того, что хочу использовать данные: uri, поэтому мой код, который вызывается при завершении вызова ajax, выглядит следующим образом:

function GotPDF(data)
{
    // Here, data contains "%PDF-1.4 ..." etc.
    var datauri = 'data:application/pdf;base64,' + Base64.encode(data);
    var win = window.open("", "Your PDF", "width=1024,height=768,resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no");
    win.document.location.href = datauri;
}

Это приведет к открытию нового окна браузера, но содержимое пустым.

Интересно, если я укажу свой браузер (IE9) на существующий файл на своем локальном диске с помощью файла: uri, например file://c:/tmp/example.pdf, тогда я получаю тот же результат, т.е. пустое окно.

Есть ли способ показать данные PDF?

Ответ 1

Код, который вы написали, ничего не отображает, просто откройте пустое окно (location.href является хешем для истории просмотра, а не содержимым страницы).

Чтобы отобразить PDF файл, у вас есть, по крайней мере, следующие параметры:

& times; Вставьте средство просмотра PDF внутри тега embed или object. Это может быть не так просто, как вы можете себе представить, взгляните на этот пост для примера кода. Короче говоря, это должно быть примерно так:

<object data="your_url_to_pdf" type="application/pdf">
    <embed src="your_url_to_pdf" type="application/pdf" />
</object>

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

& times; Загрузите файл на локальный компьютер (просто добавьте полный URL-адрес вашего метода веб-службы, который создает файл, не забудьте добавить правильный заголовок Content-Disposition в заголовок).

& times; Откройте файл в новом окне браузера. Создайте нормальный тег a, указав на файл PDF в режиме онлайн, который вы хотите отобразить в новом окне. Измените href на javascript:functionName и в этой функции создайте URI, который вы будете использовать для вызова метода веб-службы.

Независимо от того, что вы сделаете, не забудьте установить в ответе правильный тип MIME, но вы не должны возвращать поток байтов (даже если он закодирован), но действительный ответ для вашего веб-браузера.

Ответ 2

Если вы используете тег <embed> или <object> для отображения потокового файла PDF (или других типов файлов) с сервера, как в:

<object data="SomeServlet?do=get_doc&id=6" type="application/pdf" width="800" height="400">

убедитесь, что сервер отправляет нужное значение http content-disposition, которое в этом случае будет inline.