如何解决React.js 从节点后端下载 pdf 文件
我的代码只下载存在于我后端的文件。我可以看到后端的 pdf 在正确的位置正确创建,但是当我将文件发送并下载到前端并打开它时,无论我使用哪种浏览器,我都会收到错误“无法加载 pdf 文档”。我认为这一定意味着我的 blob 下载代码有问题,因为我可以打开并查看后端的文件,但我无法弄清楚。我已经尝试在网上遵循许多示例,但无论我尝试过什么,我都遇到了同样的问题。
server.js(节点后端文件)
app.get('/api/v1/getPdf',function(req,res) {
let resolve = require('path').resolve
res.sendFile(resolve('./tickets/tickets.pdf'));
});
PrintDetails.js(下载pdf的React js代码)-注意:我只包含了相关部分
class PrintDetails extends React.Component {
async printTickets() {
let file = await getTicketsPdf();
console.log(file);
const blob = new Blob([file],{type: 'application/pdf'});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'tickets.pdf';
document.body.appendChild(link);
link.click();
setTimeout(function() {
document.body.removeChild(link);
},100);
}
render() {
return (
<div>
<button className="download-button-icon" onClick={this.printTickets}>Download</button>
</div>
)
}
async function getTicketsPdf() {
let data = {};
await (async () => {
const rawResponse = await fetch('/api/v1/getPdf',{
method: 'get',headers: {
'responseType': 'blob','Content-Type': 'application/json'
},});
data = await rawResponse;
})();
return data;
}
解决方法
这是我使用 axios 和 file-saver 的实现。
Node.js 后端
app.get('/api/v1/getPdf',function(req,res) {
res.download('./tickets/tickets.pdf');
});
反应前端
import { saveAs } from 'file-saver'
.
.
.
async function printTickets() {
const { data } = await getTicketsPdf()
const blob = new Blob([data],{ type: 'application/pdf' })
saveAs(blob,"tickets.pdf")
}
async function getTicketsPdf() {
return axios.get('/api/v1/getPdf',{
headers: {
'Content-Type': 'multipart/form-data'
},responseType: 'arraybuffer'
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。