Muitas vezes, como requisito de uma aplicação web, nos é exigido a visualização inline de PDFs. Porém, sabemos que nem todos os navegadores possuem um mecanismo para visualização de arquivos PDF e que, ao invés disso, fazem o download do PDF.

Porém a pergunta que fica no ar é: Como prever esse tipo de situação para uma tomada de decisão apropriada?

Navigator.pdfViewerEnabled

A propriedade navigator.pdfViewerEnabled indica se o navegador suporta a exibição inline de arquivos PDF. Se a visualização em linha não for suportada, o PDF será baixado e/ou poderá ser manipulado por algum aplicativo externo. Esta propriedade retorna truese o navegador pode exibir arquivos PDF inline ao navegar para o arquivo (usando um visualizador interno ou uma extensão de visualizador de PDF); caso contrário false

Exemplo:

if (!navigator.pdfViewerEnabled) {
  // O navegador não suporta visualização de PDF
}

Como tratar navegadores que não suportam visualização do PDF?

Na maioria dos casos, sempre usamos o iframe para visualização de um PDF. Porém, caso o navegador não suporte a visualização do PDF, o próprio <iframe />, fará com que o download do arquivo seja feito ao tentar carregá-lo inline (e isso é um comportamento que pode não ser o desejado). Nesses casos, podemos usar uma abordagem simples, para resolver essa situação.

<iframe data-src="/arquivo.pdf" id="iframe" style="display: none" />

iframe = document.querySelector('#iframe');
if (navigator.pdfViewerEnabled) {
iframe.style.display = 'block';
iframe.src = iframe.dataset.src;
}