wee*_*raa 3 pdf ajax jquery node.js jsreport
我正在使用 nodejs 和 jquery 开发 Web 应用程序。其中有一个报告部分。当用户使用 ajax 调用向服务器发送一些数据时（这里我使用 'get' 方法来缓解问题），它应该将 pdf 发送到客户端并应该显示在弹出窗口中。
我在服务器端使用jsreport来生成报告。
这是 Node js 服务器代码。
.get('/testPdf', async function (req, res, next) {
var htmlNew = '<html> ' +
'<head> ' +
'</head> ' +
'<body> ' +
'<h2>Hello World</h2>' +
'</body> ' +
'</html> ';
return jsreport.render({
template: {
content: htmlNew,
engine: 'handlebars',
recipe: 'chrome-pdf'
},
}).then((resp) => {
var data = resp.content;
res.contentType("application/pdf");
res.send(data);
});
})
这是客户端jquery的代码。
function myPdfRun() {
console.log('Call')
$.ajax({
type: 'get',
url: serverLocation + "/api/dashboard/testPdf",
contentType: "application/json; charset=UTF-8",
success: function (response) {
window.open("data:application/pdf," + escape(response));
},
error: function (textStatus, errorThrown) {
console.log('Err');
}
});
}
我尝试做一些事情来完成我的任务。下面的代码在 ajax 调用中成功执行。
尝试 1
window.open("data:application/pdf," + response);
//它是打开新选项卡，它是空白的。
尝试 2
使用下载js，
download.bind(response, "mydownload.pdf", "application/pdf");
//什么都没发生。只有成功触发。
尝试 3
download(response, "mydownload.pdf", "application/pdf;base64");
//下载pdf。但内容不存在。只出现白纸。
尝试 4
（此代码来自论坛）
var a = document.createElement('a');
var pdfAsDataUri = "data:application/pdf;base64," + response;
a.download = 'export.pdf';
a.type = 'application/pdf';
a.href = pdfAsDataUri;
a.click();
已下载 pdf 文件。但是连打开都打不开。
尝试 5
window.open("data:application/pdf," + response);
//打开新窗口。但是控制台窗口中有一个错误日志。
错误 :不允许将顶部框架导航到数据 URL: data:application/pdf,%PDF-1.4%0A%................................
最好的部分是，当我从浏览器直接调用 Node js api ( http://localhost:9176/api/dashboard/testPdf ) 时，它成功打开了 pdf。这意味着服务器端或返回信息没有问题。
请告诉我使用 Ajax 调用在新窗口中打开 pdf 的方向。
小智 7
$base64 = chunk_split(base64_encode(file_get_contents('YOUR PDF FILE')));
echo $base64 ;
var a = document.createElement('a');
a.href= "data:application/octet-stream;base64,"+response;
a.target = '_blank';
a.download = 'filename.pdf';
a.click();