Mostrar PDF en el navegador usando express js

Te traemos la respuesta a este atascamiento, al menos eso pensamos. Si tienes alguna duda coméntalo y sin tardanza

Solución:

Especificar cómo se maneja la descarga de un archivo se reduce a la Content-disposition encabezamiento. También puede especificar aquí el nombre del archivo. También configuramos el Content-type para asegurarse de que el navegador sepa qué hacer con el archivo que se le ha dado.

Express.js Ejemplo:

app.post('/url/to/hit', function(req, res, next) 
  var stream = fs.readStream('/location/of/pdf');
  var filename = "WhateverFilenameYouWant.pdf"; 
  // Be careful of special characters

  filename = encodeURIComponent(filename);
  // Ideally this should strip them

  res.setHeader('Content-disposition', 'inline; filename="' + filename + '"');
  res.setHeader('Content-type', 'application/pdf');

  stream.pipe(res);
);

Ahora, si miras más de cerca el Content-dispositionnotarás la inline; El campo es lo que establece cómo reacciona el navegador al archivo. Si desea forzar las descargas, puede hacerlo configurando inline; para attachment;

También descubrí (al quemarme un par de veces), que si configura caracteres especiales en su nombre de archivo, puede romperse. Asique encodeURIComponent() el nombre del archivo para asegurarse de que eso no suceda.

¡Espero que ayude a otros a intentar averiguar lo mismo!

Editar

En el tiempo transcurrido desde que publiqué esto originalmente y ahora, descubrí cómo codificar correctamente el content-dispositionParámetro de nombre de archivo. De acuerdo con la especificación, el nombre del archivo debe estar codificado en RFC5987. Terminé encontrando un fragmento de código de ejemplo de MDN que maneja correctamente la codificación aquí (encodeURIComponent() no es el formato completamente correcto para este campo).

Fragmento de MDN

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" 
             + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"

function encodeRFC5987ValueChars (str) `^
            replace(/%(?:7C

Otra nota además de esta, los navegadores tampoco cumplen completamente con las especificaciones. Algunos caracteres seguirán apareciendo incorrectamente después de una descarga (al menos cuando lo probé).

puedes moverte esta problema al actualizar cómo funcionan sus descargas. Si su URL de descarga termina con el nombre del archivo (y no proporciona un filename attribute en el encabezado), obtendrá correctamente el nombre de archivo del valor codificado de la URL. ES DECIR 'http://subdomain.domain-url.com/some/path/to/downloads/' + encodeURIComponent("You're there, download this!.pdf")

¡Por Dios, y todo para proporcionar un nombre de archivo a sus descargas!

Probé tu código y me funciona en Chrome con un cambio: Cambiar app.post para app.get

EDITAR: dado que parece pensar que un servidor solo POST es una buena idea, lea esto: http://net.tutsplus.com/tutorials/other/a-beginners-introduction-to-http-and-rest/ Desplácese hacia abajo hasta los verbos HTTP y comprueba la diferencia entre GET y POST. 🙂

Algunas investigaciones rápidas sugieren que otros navegadores pueden tener otros problemas, IE, por ejemplo, podría esperar que la URL termine en .pdf. Como estoy en mi Mac, no puedo probar eso por ti;)

Mi solución para enviar un PDF directamente al navegador:

app.get('/my/pdf', function (req, res) 
    var doc = new Pdf();
    doc.text("Hello World", 50, 50);

    doc.output( function(pdf) 
        res.type('application/pdf');
        res.end(pdf, 'binary');
    );
);

res.end() con el segundo parámetro ‘binario’ funcionó en mi caso. De lo contrario, expresar interpretarlo como un string

Si estás de acuerdo, puedes dejar una sección acerca de qué te ha parecido esta sección.

---

---

Utiliza Nuestro Buscador