使用NextJs从外部源显示使用react pdf的pdf文件

Question

嗨，我使用NextJs并试图在web中显示pdf文件，我使用react pdf作为包。使用时

<Document 
file={"http://example.com/sample.pdf"}
onSourceError={(err) => console.log('source err', err)}
onLoadError={err => console.log('load err', err)}
>
<Page
pageNumber={pageNumber}
width={width}
/>

我遇到了一个CORS问题，所以我试图使用NextJs API Routes 来解决这个问题

api/pdf.js

const request = require('request');
export default (req, res) => {
return new Promise(resolve => {
res.statusCode = 200
res.setHeader('Content-Length', 99999);
res.setHeader('Content-Type', 'application/pdf')
res.setHeader('Content-Disposition', 'attachment; filename=quote.pdf');
let { parentid } = req.headers;

switch (true) {
case req.method === 'GET':
console.log('GET')
request.get('http://example.com/sample.pdf', {}, function (err, response, body) {
if (err) {
console.log('err', err)
res.status(500).json({ code: 'Internal Server Error' })
resolve();
} else {
res.status(200).send(body)
resolve()
}
})
break;
default:
res.status(400).json({ code: 'MethodNotAllowed' })
break;
}
})
}

我在失眠中尝试过，确实收到了pdf回复，但文件是空白的，

有人知道怎么解决这个问题吗？或者还有其他选择吗？感谢

Answer 1

react-pdf将页面显示为图像。因此，您必须将域example.com添加到下一个映像配置中，如https://nextjs.org/docs/basic-features/image-optimization#domains中所述