Как заставить файлы открываться в браузере вместо загрузки (PDF)?

Есть ли способ заставить PDF-файлы открываться в браузере, если флажок «Показать PDF-файл в браузере» не установлен?

Я пробовал использовать тег embed и iframe, но он работает, только если этот параметр отмечен.

Что я могу сделать?


person elloalisboa    schedule 09.06.2011    source источник


Ответы (14)


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

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

Чтобы файл загружался, а не просматривался:

Content-Type: application/pdf
Content-Disposition: attachment; filename="filename.pdf"

Кавычки вокруг имени файла необходимы, если имя файла содержит специальные символы, такие как filename[1].pdf, которые в противном случае могут нарушить способность браузера обрабатывать ответ.

То, как вы устанавливаете заголовки HTTP-ответа, будет зависеть от вашего HTTP-сервера (или, если вы генерируете PDF-ответ из серверного кода: вашего серверного языка программирования).

person ColinM    schedule 10.08.2012
comment
Для принудительной загрузки я предпочитаю использовать Content-Type: application / octet-stream. - person Papick G. Taboada; 07.01.2013
comment
@ PapickG.Taboada, но тогда система пользователя может не знать тип файла. Например. некоторые пользователи могли выбрать Всегда открывать файлы этого типа для файлов PDF. Возможно, если вы хотите переопределить предпочтения пользователя, тогда вам подойдет октет-поток, но правильный тип и предлагаемое имя файла - это правильный способ обеспечить загрузку. - person ColinM; 16.01.2013
comment
привет @ColinM Я немного сбит с толку ... у нас проблемы с рендерингом pdf, он просто выдает зашифрованный текст. где мы устанавливаем Content-Type: application / pdf Content-Disposition: inline; filename.pdf? Потому что мы загружаем его с помощью кода angular-js. Итак, мой вопрос: нужно ли устанавливать тип контента перед загрузкой? Кроме того, мы получаем только ссылку от бэкэнд-команды, URL-адрес, указывающий путь к файлу, который мы открываем в новой вкладке, используя: window.open (url, '_blank'). Focus (); - person Kailas; 17.12.2014
comment
@Kailas Я не понимаю, что вы пытаетесь сделать ... Ответ относится к заголовкам, которые сервер должен отправлять клиенту при ответе на HTTP-запрос для файла PDF. Эти заголовки не влияют на загрузку файла, вам нужно, чтобы код за URL-адресом устанавливал заголовки каждый раз, когда он загружается клиентом. - person ColinM; 18.12.2014
comment
@ColinM Спасибо, дружище, вы правильно сказали, проблема при отладке заключалась в том, что при загрузке файлов был установлен тип пантомимы. Это должно быть сделано командой back-end. Я пытался получить коды о том, как добавлять заголовки в java-скрипт, но безуспешно. Спасибо, так как я получил от вас реальную идею ... :) - person Kailas; 19.12.2014
comment
У меня не работает. Я устанавливаю Content-Type и Content-Disposition с сервера. Файл открыт с использованием URL-адреса, браузер по-прежнему запрашивает загрузку и не открывается в браузере. - person Pankaj Shinde; 26.07.2019
comment
где я могу установить этот Content-Type, помогите, пожалуйста? - person Ilia Tapia; 28.08.2019
comment
@IliaTapia - см. Последний абзац этого ответа. - person Quentin; 28.08.2019
comment
Сработало для меня - для тех, кто использует PDF-файлы в S3 с заранее заданным URL-адресом, мне нужно было установить метаданные объекта IN S3 как application / pdf. Тогда это было просто: использовать тег для встраивания с URL-адресом <embed src="{presigned_s3_url}" /> - person Julian; 20.11.2020
comment
является ли встроенный в Content-Disposition: inline; здесь значением по умолчанию для этого заголовка? если нет, что произойдет, если я установлю тип содержимого как application / pdf, без заголовка content-disposition? - person Kevin Chandra; 14.07.2021

Если вы используете HTML5 (и я думаю, что в настоящее время его используют все), есть атрибут с именем download.

Например,

<a href="somepathto.pdf" download="filename">

Здесь filename не является обязательным, но если он указан, он будет принимать это имя для загруженного файла.

person Akshay    schedule 01.10.2014
comment
Если у вас есть контроль над серверным кодом, вы должны использовать «присоединение», так как это позволит использовать тот же код генерации имени файла. Если у вас нет контроля над сервером, это хорошее решение. - person Christophe Roussy; 04.02.2015
comment
Это блестящее решение проблемы, однако, как всегда, IE удерживает нас от его использования: caniuse.com / # search = скачать - person Rory McCrossan; 05.12.2016
comment
Что ж, «край» поддерживает это, а «сафари» - нет. Ссылка w3schools.com/tags/att_a_download.asp - person Akshay; 05.12.2016
comment
Важно отметить, что это не работает для разных доменов (например, мешает политика одного происхождения). При загрузке из одного домена атрибут загрузки не будет работать, если контент хранится в другом домене. CORS может разрешить прохождение этого контента (не тестировалось). - person vol7ron; 31.01.2017
comment
Это буквально противоположно тому, о чем спрашивает OP :) - person Chuck Le Butt; 03.04.2017
comment
Да прикинул! : \ Я неправильно понял вопрос и ответил. Но многие люди попадают сюда, обнаруживая только обратное, поэтому не отредактировали / не удалили ответ. - person Akshay; 03.04.2017

Правильный тип - application/pdf для PDF, а не application/force-download. Это похоже на взлом некоторых устаревших браузеров. По возможности всегда используйте правильный mimetype.

Если вы контролируете код сервера:

  • Принудительная загрузка / запрос: используйте header("Content-Disposition", "attachment; filename=myfilename.myextension");
  • Браузер пытается открыть его: используйте header("Content-Disposition", "inline; filename=myfilename.myextension");

Нет контроля над серверным кодом:

  • Используйте атрибут загрузки HTML5. Он использует настраиваемое имя файла, указанное на стороне просмотра.

ПРИМЕЧАНИЕ. Я предпочитаю устанавливать имя файла на стороне сервера, поскольку у вас может быть больше информации и вы можете использовать общий код.

person Christophe Roussy    schedule 04.02.2015

К сожалению, в моем предыдущем посте были опечатки.

    header("Content-Type: application/force-download");
    header("Content-type: application/pdf");
    header("Content-Disposition: inline; filename=\"".$name."\";");

Если вы не хотите, чтобы браузер выводил подсказку пользователю, используйте «inline» для третьей строки вместо «attachment». Встроенный работает очень хорошо. PDF-файл отображается сразу же, не предлагая пользователю нажать кнопку «Открыть». Я использовал «вложение», и это предложит пользователю «Открыть», «Сохранить». Я попытался изменить настройки браузера, это не мешает отображать подсказку.

person trangsinh1952    schedule 22.11.2014
comment
Какой предыдущий пост? - person Peter Mortensen; 28.03.2018

Если у вас есть Apache, добавьте это в .htaccess файл:

<FilesMatch "\.(?i:pdf)$">
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</FilesMatch>
person Alexander    schedule 11.08.2015
comment
как мы можем добавить несколько расширений? Я также хочу добавить расширения DOC и XLS. Пожалуйста, предложите мне. Заранее спасибо. - person Kamlesh; 30.05.2019
comment
Это противоположно тому, о чем просят - person Quentin; 28.08.2019

Это для ASP.NET MVC

На вашей странице cshtml:

<section>
    <h4><a href="@Url.Action("Download", "Document", new { id = @Model.GUID })"><i class="fa fa-download"></i> @Model.Name</a></h4>
    <object data="@Url.Action("View", "Document", new { id = @Model.GUID })" type="application/pdf" width="100%" height="800" class="col-md-12">
        <h2>Your browser does not support viewing PDFs, click on the link above to download the document.</h2>
    </object>
</section>

В вашем контроллере:

public ActionResult Download(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        return File(model.FilePath, "application/pdf", model.FileName);
    }

public FileStreamResult View(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        FileStream fs = new FileStream(model.FilePath, FileMode.Open, FileAccess.Read);

        return File(fs, "application/pdf");
    }
person Leon van Wyk    schedule 29.11.2016

У меня возникла такая же проблема, и большинство из приведенных выше ответов должны решить вашу проблему. К сожалению, даже если я получал в ответе заголовки content-type и content-disposition, но все равно мой PDF-файл загружался, а не просматривался. После мозгового штурма и многочасовых попыток.

Виновником был firefox, в некотором смысле это был я. Нервный смех

По умолчанию, когда вы открываете PDF-файл в firefox, появляется всплывающее окно, в котором вы можете сохранить файл PDF или открыть его напрямую и есть также флажок, который говорит с этого момента выполнить это действие автоматически и угадайте, кто его выбрал.

Из-за этой ошибки мой PDF-файл загружался, а не просматривался, даже если в ответе были все необходимые заголовки. Это простая ошибка, но стоила мне много времени.

Чтобы решить эту проблему, просто перейдите в настройки и найдите приложения и измените настройки PDF на все, что вам нужно.

person Ashfaq nisar    schedule 07.06.2021

Следующее работает хорошо в firefox, но НЕ работает в браузерах Chrome и мобильных устройствах.

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

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

  • Храните файлы в каталоге вашего проекта
  • Используйте Google PDF Viewer

Google PDF Viewer можно использовать так:

<iframe src="http://docs.google.com/gview?url=http://example.com/path/to/my/directory/pdffile.pdf&embedded=true" frameborder="0"></iframe>
person Nick Kongk.    schedule 11.05.2020

Откройте файл downloads.php из корневого файла.

Затем перейдите к строке 186 и измените ее на следующее:

        if(preg_match("/\.jpg|\.gif|\.png|\.jpeg/i", $name)){
            $mime = getimagesize($download_location);
            if(!empty($mime)) {
                header("Content-Type: {$mime['mime']}");
            }
        }
        elseif(preg_match("/\.pdf/i", $name)){
            header("Content-Type: application/force-download");
            header("Content-type: application/pdf");
            header("Content-Disposition: inline; filename=\"".$name."\";");
        }

        else{
            header("Content-Type: application/force-download");
            header("Content-type: application/octet-stream");
            header("Content-Disposition: attachment; filename=\"".$name."\";");
        }
person Christian Felix Kazuya    schedule 12.11.2014
comment
Не говоря уже о том, что они используют PHP. Что, если их серверная часть находится на Python или .NET? - person Maxime Rouiller; 04.12.2015
comment
... поговорим о нестандартном. Он даже не говорит, о каких рамках он говорит. - person Archonic; 03.06.2018

Сделать это можно следующим образом:

<a href="path to PDF file">Open PDF</a>

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

<FilesMatch ".*\.(jpe?g|JPE?G|gif|GIF|png|PNG|swf|SWF|pdf|PDF)$" >
    Order Allow,Deny
    Allow from all
</FilesMatch>

Но теперь разрешите только определенные необходимые файлы.

Я использовал этот код, и он отлично работал.

person Mohsin    schedule 09.11.2012
comment
Не говоря уже о том, что они используют Apache. Что, если они используют IIS? Или экспресс? - person Maxime Rouiller; 04.12.2015

Вот еще один метод принудительного просмотра файла в браузере в PHP:

$extension = pathinfo($file_name, PATHINFO_EXTENSION);
$url = 'uploads/'.$file_name;
        echo '<html>'
                .header('Content-Type: application/'.$extension).'<br>'
                .header('Content-Disposition: inline; filename="'.$file_name.'"').'<br>'
                .'<body>'
                .'<object   style="overflow: hidden; height: 100%;
             width: 100%; position: absolute;" height="100%" width="100%" data="'.$url.'" type="application/'.$extension.'">
                    <embed src="'.$url.'" type="application/'.$extension.'" />
             </object>'
            .'</body>'
            . '</html>';
person user28864    schedule 25.02.2015
comment
header не работает после того, как вы начали выводить тело запроса (и он не возвращает строку для конкатенации в документе HTML) - person Quentin; 28.08.2019

Либо используйте

<embed src="file.pdf" />

если встраивание - вариант или мой новый плагин, PIFF: https://github.com/terrasoftlabs/piff

person Gabriel Ryan Nahmias    schedule 25.04.2012

Просто откройте Adobe Reader, выберите меню → РедактироватьНастройкиИнтернет, затем перейдите в режим браузера или для получения подробных инструкций в разных браузерах попробуйте Отображать PDF в браузере | Acrobat, Acrobat Reader.

person lawl    schedule 23.04.2015
comment
Что делать, если вы не используете AdobeReader или не используете Windows? Тебя ответить не получится. Более того, требуется попросить пользователя изменить свои настройки, чего вы не можете сделать в реальном мире. - person Clawfire; 13.07.2016

Если вы создадите ссылку на .PDF, он откроется в браузере.
Если флажок не установлен, он должен ссылаться на .zip для принудительной загрузки.

Если .zip не подходит, используйте заголовки в PHP, чтобы заставить скачать

header('Content-Type: application/force-download'); 
header('Content-Description: File Transfer'); 
person Kirk Strobeck    schedule 09.06.2011
comment
Да, но мне нужен способ заставить открываться в браузере, а не загружать. Я понятия не имею, возможно ли это. - person elloalisboa; 09.06.2011
comment
Если вы не заставляете его загружать, значит, вы заставляете его открываться в браузере. Если он не открывается в браузере, это связано с тем, что у пользователя есть определенные настройки, которые вы не можете изменить, или у них нет программного обеспечения для чтения PDF. - person Kirk Strobeck; 09.06.2011
comment
Это не правильно. Нет приложения / принудительной загрузки. Вы также можете использовать alskjdsdjk / aljksdlasdj. Браузер загрузится, потому что он не знает этого типа MIME. Правильный mime-тип для загрузки - application / octet-stream - person Papick G. Taboada; 07.01.2013