Как отобразить поток PDF в браузере, используя JavaScript

Question

Я обращаюсь к существующему веб-сервису WCF (который возвращает PDF в виде потока байтов), используя методы jjery 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?

Answer 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; Открыть файл в новом окне браузера. Создайте тег normal a, когда вы указываете на файл PDF, который вы хотите отобразить в новом окне. Измените href на javascript:functionName и в этой функции создайте URI, который вы будете использовать для вызова метода веб-службы.

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

Answer 2

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

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

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