PDF.js：如何在新选项卡中显示PDF？

Question

As a preamble, I must preside over the fact that my knowledge in web development environments is limited. In fact, my question may seem trivial to some people.

With an Ajax call, I generate a PDF, via TCPDF, which I retrieve in a variable.

I convert it to base64 and place it in a Uint8Array.

    function create_pdf() {
    var jsonOptions = jQuery("#Form").serializeArray();

    $.ajax({
        url: 'tcpdf/samples/samples_002c.php',
        type: 'POST',
        cache: false,
        data: jsonOptions
    })
        .done(function(data) {
            var pdfData = convertDataURIToBinary('data:application/pdf;base64,' + data);
            // View PDF
            // .....
    })
        .fail(function() {
            alert('Faild');
    });

    return false;
}

function convertDataURIToBinary(dataURI) {
    var BASE64_MARKER = ';base64,';
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    var base64 = dataURI.substring(base64Index);
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var array = new Uint8Array(new ArrayBuffer(rawLength));

    for(i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
    }
    return array;
}

I want to display it on the user's computer via the PDF.js viewer (the purpose being to avoid saving the PDF in a file on the server) in a new tab.

I have been looking for several days to finalize this part without success.

Do you have a research lead that would allow me to succeed in this project?

Thank you, in advance, for your advice.

Answer 1

// ADD OPEN WHIT WINDOW JAVASCRIPT
var pdfData = convertDataURIToBinary('data:application/pdf;base64,' + data);
window.open(pdfData);

Answer 2

One solution is to not use PDF.js and rely on browser handling of PDF with open function (as @MarcoDeveloper suggested). The other solution is to prepare separated page that will display your files with PDF.js.

For this you'll need to prepare simple html page. I would suggest to use post message, but you can also send data directly if your page is on same domain.

preview.html :

window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
   if (event.origin === window.location.origin) {
       PDFJS.getDocument({ data: convertDataURIToBinary(e.data) }).then(function() {
       });
   }
}

index.html :

var win = window.open('preview.html');
win.postMessage(dataURI, '*');

it's probably good idea to send base64 data and decode in preview.html.

to send pdf data directly you can use (only on same domain):

var win = window.open('preview.html');
win.PDFJS.getDocument({ data: binary_data });

the file preview.html only need to include JS file for PDF.js and it should work.