Chrome и Firefox не отображают большинство документов PDF в iframe - PullRequest
3 голосов
/ 06 сентября 2011

Я использую Windows 7, 64 бит. Я недавно обновил свою ОС, чтобы установить последние обновления. С тех пор большинство документов PDF перестали отображаться в моей программе. Моя программа хочет отображать PDF документы в отдельном фрейме. Я делаю это, получая URL-адрес документа PDF и устанавливая window.frames['docview'].location = url;. В большинстве случаев представление iframe остается пустым (или очищается, если что-то там было показано ранее). Если я возьму тот же URL и открою его на новой вкладке или в окне, он будет хорошо отображаться.

Когда не удается выполнить рендеринг в моем iframe, я вижу следующее сообщение в консоли Chrome:

Resource interpreted as Document but transferred with MIME type application/pdf.

Firefox не предлагает никаких сообщений ни в своей консоли ошибок, ни в консоли FireBug.

У меня нет контроля над источником файлов PDF, поэтому я не могу изменить информацию об их заголовках.

Как ни странно, некоторые файлы загружаются правильно.

Глядя на сетевые запросы в Chrome, для документа, который не загружается, я вижу (например):

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:200 OK

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:es.csiro.au
Referer:http://querium.fxpal.net:8080/querium/ui/query?searcherId=2&compact=true&sidx=rank&topicId=2&queryId=1&lastEventId=1490893682130103&highlight=undefined
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:71764
Content-Type:application/pdf
Date:Tue, 06 Sep 2011 04:59:26 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Last-Modified:Wed, 07 Nov 2007 04:07:49 GMT
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

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

Request URL:http://es.csiro.au/pubs/paradis_mdm03.pdf
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:es.csiro.au
If-Modified-Since:Wed, 07 Nov 2007 04:07:49 GMT
If-None-Match:"1f48c8-11854-43e4ee482ef40"
Range:bytes=0-71763
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

Response Headers
Connection:Keep-Alive
Date:Tue, 06 Sep 2011 05:07:15 GMT
ETag:"1f48c8-11854-43e4ee482ef40"
Keep-Alive:timeout=15, max=100
Server:Apache/2.0.55 (Ubuntu) PHP/5.1.2 mod_ssl/2.0.55 OpenSSL/0.9.8a

Одна странная вещь - это разница в статусе, но, возможно, сервер работает умно или что-то смешно с кешем. Кто знает.

Любая помощь будет принята с благодарностью.

Gene

ИЗДАНО: 9/6/2011

Когда я удалил тег

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

из элемента <head> моей HTML-страницы, многие (но не все) PDF-файлы начали правильно отображаться. Это был очевидный дубликат другого метатега в заголовке:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Помогает ли это пролить свет на потенциальную проблему?

Ответы [ 2 ]

2 голосов
/ 12 апреля 2013

Вместо установки атрибута src iframe в PDF, установите его в HTML-файл-оболочку, который содержит простой div:

<!DOCTYPE html>
<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
    <div id="divContents" style="height:100%;"></div>
</body>
</html>

В javascript содержимое div установлено на элемент object. К сожалению, для надежной работы во всех браузерах требуются несколько разные версии (протестировано в IE, Firefox и Chrome):

(я упростил извлечение элемента divContents и обнаружение в браузере)

var embed = '<object type="application/pdf" width="100%" height="100%"';
if (msie) {
    embed += '><param name="src" value="' + pdf + '"/>';
}
else if (chrome) {
    embed += ' src="' + pdf + '">';
}
else {
    embed += ' data="' + pdf + '">';
}
embed += '</object>';
$("#divContents").html(embed);

ОБНОВЛЕНО

Я наконец нашел фактическую причину сбоя в Chrome: это поле Accept-Ranges:bytes, без которого Chrome не будет работать, если используется атрибут data.

  • Итак, если ваш сервер поддерживает поле Accept-Ranges, вы должны убедиться, что оно возвращено клиенту. В этом случае вы можете использовать библиотеку pdfobject для отображения PDF в рамке или в формате div.
  • Если нет, вы можете использовать приведенный выше код для отображения PDF в виде рамки или деления.
0 голосов
/ 16 апреля 2013

В прошлом сообщалось о нескольких проблемах, связанных с загрузкой pdf в iframe, как для Firefox, так и для Chrome (в частности, когда заголовки типа Content-Type и Content-Disposition установлены неправильно).

Возможно, вы должны использовать тег <object> для встраивания pdf в вашу страницу вместо iframe, но более простым решением является библиотека pdfobject .Чтобы убедиться, что это работает, вы можете просмотреть это jsfiddle с Chrome и Firefox.

Более того, вы можете использовать прокси-скрипт на вашем сервередля потоковой передачи PDF-файлов: ваша страница будет указывать на прокси-скрипт и передавать идентификатор (чтобы его было легко взломать), а скрипт загрузит и отправит в браузер соответствующий pdf-файл с соответствующими заголовками.

Наконец, примечание о различных кодах состояния: в первом ответе сервер отправил в браузер Last-Modified и ETag, который содержит метку времени и хэш файла;таким образом, браузер во втором запросе запрашивает только ресурсы

If-Modified-Since:Wed, 07 Nov 2007 04:07:49 GMT
If-None-Match:"1f48c8-11854-43e4ee482ef40" 

Поскольку ресурс не был изменен, второй ответ - 304.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...