Estoy usando next.js. Tengo un servicio de terceros del que necesito recuperar un archivo PDF. El servicio requiere una clave de API que no quiero exponer en el lado del cliente.
Aquí están mis archivos
/api/getPDFFile.js ...
const options = { method: 'GET', encoding: 'binary', headers: { 'Subscription-Key': process.env.GUIDE_STAR_CHARITY_CHECK_API_PDF_KEY, 'Content-Type': 'application/json', }, rejectUnauthorized: false, }; const binaryStream = await fetch( 'https://apidata.guidestar.org/charitycheckpdf/v1/pdf/26-4775012', options ); return res.status(200).send({body: { data: binaryStream}});páginas/getPDF.js
<button type="button" onClick={() => { fetch('http://localhost:3000/api/guidestar/charitycheckpdf', { method: 'GET', encoding: 'binary', responseType: 'blob', }).then(response => { if (response.status !== 200) { throw new Error('Sorry, I could not find that file.'); } return response.blob(); }).then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.setAttribute('download', 'test.pdf'); document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); })}}>Click to Download</button>Al hacer clic en el botón, se descarga un archivo, pero cuando lo abro, veo el mensaje de error "Error al cargar el documento PDF".
Parece que estás usando node-fetch . Entonces, puedes hacer algo como esto:
// /pages/api/getAPI.js import stream from 'stream'; import { promisify } from 'util'; import fetch from 'node-fetch'; const pipeline = promisify(stream.pipeline); const url = 'https://w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'; const handler = async (req, res) => { const response = await fetch(url); // replace this with your API call & options if (!response.ok) throw new Error(`unexpected response ${response.statusText}`); res.setHeader('Content-Type', 'application/pdf'); res.setHeader('Content-Disposition', 'attachment; filename=dummy.pdf'); await pipeline(response.body, res); }; export default handler;Luego del cliente:
// /pages/index.js const IndexPage = () => <a href="/api/getPDF">Download PDF</a>; export default IndexPage;CodeSandbox Link (abra la URL implementada en una nueva pestaña para ver cómo funciona)
Referencias:
<a> : El elemento Ancla | MDN PD: No creo que sea necesario mucho manejo de errores en este caso. Si desea ser más informativo para su usuario, puede hacerlo. Pero tanto código también funcionará bien. En caso de error, la descarga del archivo fallará mostrando "Error del servidor". Además, no veo la necesidad de crear primero una URL de blob . Puede descargarlo directamente en su aplicación ya que la API está en el mismo origen.
Anteriormente había usado request , y también lo publiqué aquí en caso de que alguien lo necesite:
import request from 'request'; const url = 'https://w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'; export default (_, res) => { request.get(url).pipe(res); };