【问题标题】：Open pdf in new window with Ajax call使用 Ajax 调用在新窗口中打开 pdf
【发布时间】：2019-01-25 23:06:21
【问题描述】：

我正在使用 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');
        }
    });
}

我会尝试一些事情来完成我的任务。下面的代码在 success 中在 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%....... em>

最好的部分是，当我从浏览器直接调用 Node js api (http://localhost:9176/api/dashboard/testPdf) 时，它成功打开了 pdf。表示服务器端或返回信息没有问题。

请告诉我使用 Ajax 调用在新窗口中打开 pdf 的方向。

【问题讨论】：

标签： jquery node.js ajax pdf jsreport

【解决方案1】：

php

$base64 = chunk_split(base64_encode(file_get_contents('YOUR PDF FILE')));

echo $base64 ;

java 脚本

var a = document.createElement('a');
a.href= "data:application/octet-stream;base64,"+response;
a.target = '_blank';
a.download = 'filename.pdf';
a.click();

【讨论】：