En este artículo, veremos cómo enviar archivos PDF en la respuesta de la ruta rápida y hacer que el navegador fuerce la descarga del archivo.
Acercarse:
- Cargue los paquetes requeridos, luego cree una aplicación rápida.
- Defina las rutas para la página de inicio y las requests de descarga de PDF.
- Cree un archivo index.html con un solo botón para descargar PDF.
- Ejecute la llamada ajax al hacer clic en el botón para OBTENER el PDF.
- Especifique el tipo de respuesta de la llamada ajax como «blob» en xhrFields , ya que «blob» se usa para almacenar objetos como imágenes, audios y videos, ya que requieren más espacio que otros tipos de datos.
- En una llamada ajax exitosa, convierta el archivo PDF recibido de formato blob a formato PDF.
- Ahora, para hacer que el navegador fuerce la descarga del PDF:
a. Cree una etiqueta <a> oculta.
b. Cree una referencia al archivo usando el método window.URL.createObjectURL().
C. Establezca su atributo href en la URL del blob.
d. Establezca su atributo de descarga en el nombre del archivo.
mi. Haga clic en la etiqueta <a> .
F. Elimina la etiqueta <a> del DOM.
gramo. Libere una URL de objeto existente (la referencia al archivo) e informe al navegador que no debe mantener la referencia al archivo por más tiempo.
Paso 1: Instale los paquetes necesarios
En primer lugar, instale los siguientes paquetes de Nodes.
npm install --save express
Paso 2: Cree una configuración básica de servidor Express
Cree un archivo llamado app.js y con el siguiente código como se muestra a continuación.
App.js
// Load necessary packages
const express = require("express");
// create an express app
const app = express();
// define PORT number to listen to the requests
const PORT = process.env.PORT || 3000;
// to serve files from uploads directory
app.use("/uploads", express.static("uploads"));
// express routes
app.use("/", require("./routes"));
// listen to requests
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));
Paso 3: Definir rutas para la aplicación
Cree un archivo llamado route.js y con el siguiente código como se muestra a continuación.
routes.js
// Load necessary packages
const express = require("express");
// express router
const router = express.Router();
// respond with index.html when a GET request is made to the homepage
router.get("/", (req, res) => {
res.sendFile(__dirname + "/views/index.html");
});
// route for handling PDF request
router.get("/downloadPDF", (req, res) => {
res.download("uploads/Resume.pdf");
});
// export router middleware and use it in app.js
module.exports = router;
Paso 4: ejecutar el servidor
Ahora inicie su servidor express usando el siguiente comando:
node app.js
Paso 5: Abra el navegador e ingrese la URL
Abra su navegador favorito y en la barra de direcciones ingrese http://localhost:3000/downloadPDF y luego presione Enter, el archivo Resume.pdf se descargará automáticamente.
Producción:
Paso 6: Hacer que el PDF sea descargable a través de un botón.
Puede hacer que el navegador descargue el PDF con un clic de un botón usando el detector de eventos de clic en el botón y luego haciendo una solicitud ajax a la URL anterior.
Para hacer la descarga de PDF al hacer clic en el botón, primero cree un archivo index.html con los siguientes contenidos:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<button id="download" class="btn btn-primary my-5">
Download PDF
</button>
</div>
<script src=
"https://code.jquery.com/jquery-3.6.0.js"
integrity=
"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous">
</script>
<script>
$("#download").click(function (e) {
$.ajax({
type: "GET",
url: "/downloadPDF",
xhrFields: {
// specify response type as "blob" to handle objects
responseType: "blob",
},
success: function (data) {
// creating a hidden <a> tag
var a = document.createElement("a");
// creating a reference to the file
var url = window.URL.createObjectURL(data);
// setting anchor tag's href attribute to the blob's URL
a.href = url;
// setting anchor tag's download attribute to the filename
a.download = "Resume.pdf";
document.body.append(a);
// click on the <a> tag
a.click();
// after clicking it, remove it from the DOM
a.remove();
// release an existing object URL which was previously
// created by calling URL.createObjectURL()
// once we have finished using an object URL, let the
// browser know not to keep the reference to the file any longer.
window.URL.revokeObjectURL(url);
},
error: function (result) {
alert("error");
},
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por girishthatte y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA