4

Easy points for someone who knows the answer. My code successfully downloads a pdf from a website via cross document messaging. However, I want to now display the pdf in the browser, possibly in an iframe or data object. Possibly I would need to know the local url that the pdf is stored as once downloaded. Please help, probably easy points. See the fiddle here for my code.

IMPORTANT: Because I want to download the file I do not want to simply make client.src="http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/thumbnail.pdf?Range=1"

HTML code:

    <input type="button" onclick="runit()" value="runit"></input>
    <iframe width=100 height=100 id="client" src="http://ops.epo.org/3.0/xss/crosssitescript.html" />

Javascript code:

function runit() {
    // Get the iframe window object
    var client = document.getElementById('client');
    // Create the data string to be passed to the OPS JavaScript
    var data = "{'url' : 'http://ops.epo.org/3.0/rest-services/published-data/images/US/7123345/B2/thumbnail.pdf?Range=1', " + "'method' : 'GET', " + "'requestHeaders' : {'Accept': 'application/pdf' } " + "}";
    // Use the postMessage() method in order to send the data to the
    // iframe object
    client.contentWindow.postMessage(data, 'http://ops.epo.org');
}
// Add event listener for your window
window.addEventListener("message", receiveMessage, false);
// Method handling window events
function receiveMessage(event) {
    // Check origin of the event!
    if (event.origin == "http://ops.epo.org") {
        alert("How do I display the event.data as a pdf on the page?");
    } else {
        alert("Got message from unknown source.");
    }
}
user2104778
  • 992
  • 1
  • 14
  • 38
  • use window.URL.createObjectURL to turn a blob into a url that can be displayed in an iframe. use Blob or blobBuilder to turn your string into a blob. – dandavis Oct 10 '13 at 20:00
  • @dandavis, this works only in Chrome: http://jsfiddle.net/Noseratio/uZwQw/1/. Forefox and IE bail. Chrome has its own PDF renderer. Apparently, the problem is with Adobe Acrobat Reader plugin. – noseratio Oct 11 '13 at 01:08

1 Answers1

6

I've tried your code, it returns PDF content as literal string (in event.data). You can't get a URL (local or non-local) for string data, unless you first upload it back to somewhere (e.g., to your own server via XHR). Apart from that, I hope this answer helps.

The following approach uses Data URI scheme to render a PDF represented by a string (like event.data in your case). It works great with Chrome and Firefox. Unfortunately, with IE10 I'm getting "Access Denied" message by Adobe Acrobat Reader plugin (IE10/Win8 64bit w/latest updates and latest Adobe Acrobat Reader). So, for cross-browser solution your best bet would probably be a some kind of HTML5-based PDF renderer, like PDF.js.

Fiddle: http://jsfiddle.net/Noseratio/nmTJ9/1/

HTML/JavaScript:

<!DOCTYPE html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
        window.runit = function() {
            // var pdfText = event.data;
            var pdfText = pdfSource.text;
            var pdfTextEncoded = btoa(unescape(encodeURIComponent(pdfText)));

            textContainer.innerText = pdfText;
            pdfContainer.innerHTML =
                '<object id="pdf"' +
                    'width="400" height="240" type="application/pdf"' +
                    'data="data:application/pdf;base64,' + pdfTextEncoded + '">' +
                    '<span>PDF plugin is not available.</span>' +
                '</object>';
        }
    </script>
</head>

<body>
    <input type="button" onclick="runit()" value="runit">

    <!-- http://en.wikipedia.org/wiki/Data_URI_scheme -->
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

    <br>
    <textarea id="textContainer" style="width: 400px; height: 240px"></textarea>
    <br>
    <div id="pdfContainer"></div>

<script id="pdfSource" type="text/plain">
%PDF-1.7

1 0 obj  % entry point
<<
    /Type /Catalog
    /Pages 2 0 R
>>
endobj

2 0 obj
<<
    /Type /Pages
    /MediaBox [ 0 0 200 200 ]
    /Count 1
    /Kids [ 3 0 R ]
>>
endobj

3 0 obj
<<
    /Type /Page
    /Parent 2 0 R
    /Resources <<
    /Font <<
        /F1 4 0 R 
    >>
    >>
    /Contents 5 0 R
>>
endobj

4 0 obj
<<
    /Type /Font
    /Subtype /Type1
    /BaseFont /Times-Roman
>>
endobj

5 0 obj  % page content
<<
    /Length 44
>>
stream
BT
70 50 TD
/F1 12 Tf
(Hello, world!) Tj
ET
endstream
endobj

xref
0 6
0000000000 65535 f 
0000000010 00000 n 
0000000079 00000 n 
0000000173 00000 n 
0000000301 00000 n 
0000000380 00000 n 
trailer
<<
    /Size 6
    /Root 1 0 R
>>
startxref
492
%%EOF
</script>

</body>

[EDITED] Using BLOB and URL.createObjectURL(blob) works only with Chrome. Apparently, Acrobat Reader plugin doesn't support "blob:"-style URL at the time of this writing.

Fiddle: http://jsfiddle.net/Noseratio/uZwQw/1/

So, a real classic URL is still required for a cross-browser solution.

noseratio
  • 59,932
  • 34
  • 208
  • 486
  • I appreciate your effort and I think we are close. However, I still cannot adapt your code to download the pdf as I wanted. I got [http://jsfiddle.net/6zCgA/91/](http://jsfiddle.net/6zCgA/91/)(this far, click to access) however, and I would appreciate any comments on how to complete this. – user2104778 Oct 12 '13 at 17:58
  • 1
    @user2104778, you can use "blob:"-style URL to create a download link, fiddle: http://jsfiddle.net/Noseratio/uZwQw/6/ (click `runit`, the link will appear). However, you'd have to ask user to right click the link to download. I'm not aware of any other way of providing a download feature, besides uploading the data to your own server, then making it available for download via a classic http URL with `content-disposition` HTTP header, like [explained here](http://stackoverflow.com/a/8876185/1768303). This would also solve the problems with PDF plugins. – noseratio Oct 13 '13 at 00:09
  • 1
    Well I couldnt' get the blob thing working. Maybe because I am testing on safari. Anyway I was hoping for a solution that works in all browsers. Maybe there is no such thing. But at any rate I will upvote the answer. Thanks. – user2104778 Oct 13 '13 at 04:42