javascript - Embed PDF Byte Data in HTML - Stack Overflow

admin管理员组

文章数量:1288074

This should be working, but it seems I am missing something.

I have a pdf file on a local drive. Obviously Chrome and other browsers can't get that local URL since it's sandboxed, so I have a servlet pulling the data from the local drive and sending it back through an ajax call to the web client. I'm not getting any errors, and it seems a pdf viewer is loading, but the file itself won't display. I am encoding it ahead of time, but it still won't work. I will display my numerous approaches below, but I won't include the servlet code since that seems to be working.

Attempt 1:

function embedFile(){
    $.get("FileGetter", function(pdfText){

        var base64EncodedPDF = b64EncodeUnicode(pdfText);
        $("#embedHolder").append("<object id='embedder' width='80%' height='600px'><embed width=100% height=100%"
                                     + ' type="application/pdf"'
                                     + ' src="data:application/pdf;base64,'
                                     + base64EncodedPDF
                                     + "></embed></object>");

            });
        }

 function b64EncodeUnicode(str) {
     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
        }

Attempt 2:

function embedFile(){
    $.get("FileGetter", function(pdfText){

        var base64EncodedPDF = b64EncodeUnicode(pdfText);
        var obj = $('<object id="repObjID" type="application/pdf" width="100%" height="600" border="2"></object>'); 
        obj.attr('data',base64EncodedPDF); 
        var embed = $('<embed type="application/pdf"></embed>'); 
        embed.attr('src',base64EncodedPDF); 
        $('#repObjID').append(embed); 
        $("#docHolder").html(obj);
    }

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,               function(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
}    

This should be working, but it seems I am missing something.

I have a pdf file on a local drive. Obviously Chrome and other browsers can't get that local URL since it's sandboxed, so I have a servlet pulling the data from the local drive and sending it back through an ajax call to the web client. I'm not getting any errors, and it seems a pdf viewer is loading, but the file itself won't display. I am encoding it ahead of time, but it still won't work. I will display my numerous approaches below, but I won't include the servlet code since that seems to be working.

Attempt 1:

function embedFile(){
    $.get("FileGetter", function(pdfText){

        var base64EncodedPDF = b64EncodeUnicode(pdfText);
        $("#embedHolder").append("<object id='embedder' width='80%' height='600px'><embed width=100% height=100%"
                                     + ' type="application/pdf"'
                                     + ' src="data:application/pdf;base64,'
                                     + base64EncodedPDF
                                     + "></embed></object>");

            });
        }

 function b64EncodeUnicode(str) {
     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
        }

Attempt 2:

function embedFile(){
    $.get("FileGetter", function(pdfText){

        var base64EncodedPDF = b64EncodeUnicode(pdfText);
        var obj = $('<object id="repObjID" type="application/pdf" width="100%" height="600" border="2"></object>'); 
        obj.attr('data',base64EncodedPDF); 
        var embed = $('<embed type="application/pdf"></embed>'); 
        embed.attr('src',base64EncodedPDF); 
        $('#repObjID').append(embed); 
        $("#docHolder").html(obj);
    }

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,               function(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
}    

• javascript
• pdf
• servlets
• arrays

Share Improve this question Follow asked Aug 1, 2016 at 18:07 Marcel MarinoMarcel Marino 1,00233 gold badges1919 silver badges3535 bronze badges 3

• 1) Are you sure your PDF viewer does accept base64 data encoded in the src URL? 2) How does the server get the the data from local drive? I suggest the user has to choose the file, which is then uploaded (via AJAX?) to the servlet? – Jozef Chocholacek Commented Aug 2, 2016 at 6:41
• Not quite. The user is selecting a record in the database and on that record is a URL that points to a local directory. The server then reads the data from the local URL and converts it to bytes, which are then transferred to the client via the response. I thought it was working, but I was able to open the document in a new window semi-successfully. The pdf shows up, and is the correct number of pages, yet each page is pletely blank. As for the PDF viewer, I'm using the chrome default. – Marcel Marino Commented Aug 2, 2016 at 14:05
• You could make a binary Blob (with content type), and then create an object URL, and load that in an iframe. – Rudie Commented Dec 27, 2017 at 16:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

1. Download the binary data with ajax, into an arraybuffer

var xhr = new XMLHttpRequest;
xhr.open('get', '/path/to/pdf', true);
xhr.responseType = 'arraybuffer';
xhr.send();

2. Create Blob and Object URL

var blob = new Blob([xhr.response], {type: 'application/pdf'});
var url = URL.createObjectURL(blob);

3. Load URL in iframe

iframe.src = url;

Demo: https://webblocks.nl/tests/ajax-pdf.html

本文标签： javascriptEmbed PDF Byte Data in HTMLStack Overflow