我使用的是next.js。我有一个第三方服务,我需要从中检索PDF文件。该服务需要一个API密钥,我不希望在客户端暴露。
这是我的文件
/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}});
字符串
pages/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>
型
点击按钮下载一个文件,但当我打开它时,我看到错误消息,“加载PDF文档失败”。
3条答案
按热度按时间pinkon5k1#
您似乎正在使用
node-fetch
。因此,您可以执行以下操作:字符串
然后从客户端:
型
CodeSandbox Link(在新选项卡中打开deployed URL以查看其工作情况)
参考文献:
<a>
:锚元素|MDN附言:我不认为在这种情况下有太多的错误处理是必要的。如果你想给你的用户提供更多的信息,你可以。但是这么多的代码也会很好地工作。在错误的情况下,文件下载将失败,显示“服务器错误”。此外,我不认为有必要首先创建一个
blob
URL。你可以直接在你的应用程序中下载它,因为API是在同一个源上。以前的I had used
request
,也张贴在这里,以防有人需要它:型
nimxete22#
@brc-dd在这个问题上帮了我。我必须添加的一件事是动态生成的link元素(参见代码中的
var link
),一旦我们从API获得文件数据,它就会自动单击。这对于获得一致的下载非常重要(我没有事先获得)。创建下载文件链接的页面代码如下所示:
字符串
链接调用的本地NextJs API端点(/API/qualtrics/retrieve-file)如下所示:
型
t9eec4r03#
如果您使用的是Next.js 14,并使用ImageResponse从Route Handler下载镜像文件
字符串
参考资料: