javascript - 在 ReactJS/Javascript 中将 Base64 转换为 PDF 文件时遇到错误
问题描述
我正在努力在 ReactJS 中将 PDF 显示为附件。我已经设法将base64带到前端,但是在我尝试创建blob对象后它不起作用,虽然它进入了Acrobat阅读器但显示了错误。请提供任何建议,如我如何正确地将 base64 转换为 pdf。
我还上传了在 pastebin 控制台登录时得到的 base64 代码,https ://pastebin.com/W4zEXyPy
注意:
当我尝试在https://base64.guru/进行修复时,它显示无效的字符串和字符(数据:应用程序/pdf;),我尝试使用content.slice(29);
它,因此它将从JVB...
(而不是从data:application/pdf;base64,JVBERi0xL........
)开始,但得到相同错误。
链接到修复 Base64 的图片 atbase64guru
Error:
未正确解码
响应 API 调用的NodeJS 后端代码
let token = req.cookies.access_token; if (token) { let Invoice_No_Actual = req.body.invoice_Name; res.set("Content-disposition", "attachment; filename=" + `${__dirname}\\` + `${Invoice_No_Actual}` + `.pdf`); res.contentType("application/pdf"); res.send(`data:application/pdf;base64,${new Buffer.from(data).toString("base64")}`); } });
前端代码API 调用
const headers = new Headers(); headers.append("content-type", "application/json"); headers.append("responseType", "application/pdf"); const options = { method: "POST", headers, credentials: "include", body: JSON.stringify(invoice_Object), // body: "My HTML String", }; const newRequest = new Request("http://localhost:5000/api/invoice-only", options); (async () => { const invoice_Call = await fetch(newRequest) .then((res) => { return text1 = res.text(); }) .then((data) => { generateFile(data, invoice_Name); }); })(); };
generateFile() 函数调用Front End- 收到响应后
let generateFile = (content, fileName) => {
console.log("content", content); // here at console if i copy the code and use online tool(https://base64.guru/converter/decode/pdf) it shows the correct pdf
let content1= content.slice(29);// content1 is correct base64 as if i use it online tool it correctly generate the PDF document
const blob = new Blob([content1], { type: "application/pdf" });
console.log(blob);
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
};
解决方案
一个简单的console.log(content.slice(29))
可能会暴露你的错误。问题是该content1
变量包含一个以“VBE...”开头的字符串,而它必须以“JVBE...”开头。因此,您的错误是该slice()
函数丢弃了太多字符。
推荐阅读
- ansible - 如何有条件地运行 Ansible playbook?
- python - Python argparse - 添加带条件的强制参数
- php - MySQL - 根据发送/失败的文本更新多行的最佳方法
- java - 从模式中解包字节
- react-native - React Native - 在 CC 中设置电子邮件发件人
- excel - 在 excel 或 VBA 中只计算一次重复值,当我添加新房间时将自动计算我的房间类型总数
- php - 即使删除视频文件后,视频仍在 html 视频元素中播放
- r - 函数在两个或多个标签中的值中选择最大值
- c - malloc(sizeof(ptr)) 和 malloc(sizeof(ptr*)) 之间的区别?
- ruby-on-rails - Rails 6 gemfile.lock 删除,再次生成