AngularJS,从缓冲区响应打开PDF预览

deyfvvtc  于 2022-10-31  发布在  Angular
关注(0)|答案(1)|浏览(255)

我正在使用NodeJS 16.4AngularJS 1.5.8。我还在使用带有NodeJS集成的JSReportJSReport)。
这就是我的任务:我需要使用JSReport通过模板创建一个PDF文件。我已经创建了,函数将生成一个buffer response

router.post('/queryreport/certificationAdvancement', async function(req, res) {
    try {
        const data = req.body.data;
        var inspectionType = '';

        if(data.inspection == 12) inspectionType = 'Ispezioni Visive';
        else inspectionType = `Ispezioni ${data.supervision_number}^ Sorveglianza`;

        const title = 'Stato Avanzamento delle Certificazioni';
        const subtitle = `${inspectionType} - Anno ${data.year}`;

        //Header del Report
        const header = await get_queryReport_header(data.dealer, title, subtitle);
        //Footer del Report
        const footer = await get_footer(title);
        //Dataset del Report
        const dataset = await get_certificationAdvancement_dataset(data);

        //Costruzione del Report tramite JSReport
        const report = await jsreport.render({
            template: {name: 'certificationAdvancement'},
            data: {header: header, dataset: dataset, footer: footer}
        })

        const buffer_report = await report.body();
        console.log(buffer_report);

        res.contentType('application/pdf');
        res.send(buffer_report);

    }
    catch (error) {
        global.loggerWinston.error(commons.sios_loggerWinstonError(error, 'SIOS'));
        return commons.showerror(error, res);
    }
});

console.log(buffer_report)具有缓冲区的形式:
<Buffer 25 50 44 46 2d 31 2e 36 0a 25 ff ff ff ff 0a 0a 34 20 30 20 6f 62 6a 0a 3c 3c 0a 09 2f 63 61 20 31 0a 09 2f 42 4d 20 2f 4e 6f 72 6d 61 6c 0a 3e 3e 0a ... 38478 more bytes>
我尝试将其发送回前端(angularJS)并在浏览器中预览PDF文件,可能在一个新的选项卡中。我尝试了许多解决方案,但似乎都不起作用

$scope.download_jsreport = function () {
    var data = {year: $scope.Year, dealer: $scope.Dealer, inspection: parseInt($scope.Inspection)};
    if($scope.numSorv) data.supervision_number = $scope.numSorv;

    /*
    jsreportService.certificationAdvancement.post is the service used to call the function
    I could write it through a $http.post like this

    $http.post('/api/jsreport/queryreport/certificationAdvancement', {data: data})
    .then(function(result) {

    });

    */

    //$window.open(jsreportService.certificationAdvancement.post({data: data}), '_blank');

    jsreportService.certificationAdvancement.post({data: data}, function (result) {
        /* var a = document.createElement("a");
        a.href = "data:application/octet-stream;base64," +  encodeURIComponent(result.report);
        a.target = "_blank";
        a.download = result.filename;
        document.body.appendChild(a);
        a.click();

        var a_link = document.createElement('a');
        a_link.href = 'data: application/octet-stream; base64, ' + result.buffer_report.data;
        a_link.download = 'certificationAdvancement.pdf';
        a_link.click(); */
    });
}

有什么建议吗?
编辑:根据迈克尔G的回答,我设法解决了这个问题。
这是服务器端调用的最后一部分,此时pdf已经完成(前一部分保持不变)

//Costruzione del Report tramite JSReport
const report = await jsreport.render({
    template: {name: 'certificationAdvancement'},
    data: {header: header, dataset: dataset, footer: footer}
});

const resultReport = await report.body();
return res.send(Buffer.from(resultReport).toJSON());

而控制器部分变成(当调用完成时):

const reportBuffer = new Uint8Array(result.data);
const file = new Blob([reportBuffer], {type: 'application/pdf'});
const fileURL = window.URL.createObjectURL(file);

const fileName = 'file.pdf';
var a_link = document.createElement('a');
document.body.appendChild(a_link);
a_link.style = 'display: none';
a_link.href = fileURL;
a_link.download = fileName;
a_link.click();
uxhixvfz

uxhixvfz1#

这是我整个星期都在努力做的事情。这是我找到的解决方案,似乎是它应该的工作方式:当将报告缓冲区数据从Express返回到AngularJS时,我将缓冲区转换为JSON,如下所示:

res.send(Buffer.from(report.content).toJSON());

在Express端,我将.data从JSON格式的缓冲区转换为Uint8Array:

let reportBuff = new Uint8Array(reportOutput.data);
let pageData = new Blob([reportBuff], {type: 'application/pdf'} );
this.$window.open(URL.createObjectURL(pageData));

在本例中是PDF,但应该也适用于HTML。

相关问题