CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerpdf
Michael
Michael

Reputation: 1203

preview pdf with internet explorer before uploading it on the server

I would like to display a pdf in the browser without storing it on the server (I got a lot of example with stored pdf but it's not what I want). The problem is that I'm not able to find a way to make it works in IE (current version on my desktop is IE11). It seems that IE doesn't like URL.createObjectUrl. I try compatibility mode "Edge" in my browser but nothing is displaying. Here's my code: 

<!DOCTYPE html>   <html lang="fr">
    <head>
        <title>JavaScript PDF Viewer Demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function PreviewImage() {
                if(pdffile=document.getElementById("uploadPDF").files != undefined)
                {
                    pdffile=document.getElementById("uploadPDF").files[0];
                }
                else
                {
                    pdffile=document.getElementById("uploadPDF").value;
                }
                pdffile_url=URL.createObjectURL(pdffile);
                $('#viewer').attr('src',pdffile_url);
            }
            function Deposer(){
                alert("Déposé!");
            }
        </script>
    </head>
    <body>
        <input id="uploadPDF" type="file" name="myPDF"/>&nbsp;
        <input type="button" value="Visualiser" onclick="PreviewImage();" />        <input type="button" value="Déposer" onclick="Deposer();" />
        <div style="clear:both">
           <iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
        </div>
    </body> </html>

I've an example who is working in IE but only for an image.

<style type="text/css">
    #prevImage {
        border: 8px solid #ccc;
        width: 300px;
        height: 200px;
    }
</style>
<script type="text/javascript">
    function setImage(file) {
        if(document.all)
            document.getElementById('prevImage').src = file.value;
        else
            document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
        if(document.getElementById('prevImage').src.length > 0)
            document.getElementById('prevImage').style.display = 'block';
    }
</script>
<form>
    <input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />

Does Somebody already make it work in IE? I can use Jquery but I can not install framework like nodejs (I know the Mozilla project PDF.js but it using nodejs).

Upvotes: 1

Views: 3228

Answers (1)

Michael
Michael

Reputation: 1203

Finally, it's possible to use pdf.js without nodejs (thanks to async5).

I got a solution working now on IE (IE10+) using pdf.js (Using project https://github.com/mozilla/pdfjs-dist)

There it is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript"  src="/pdfjs-dist-master/build/pdf.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            if (!PDFJS.workerSrc && typeof document !== 'undefined') {
                  // workerSrc is not set -- using last script url to define default location

                  PDFJS.workerSrc = (function () {
                    'use strict';
                    var scriptTagContainer = document.body ||
                                             document.getElementsByTagName('head')[0];
                    var pdfjsSrc = scriptTagContainer.lastChild.src;
                    return pdfjsSrc && pdfjsSrc.replace(/\.js$/i, '.worker.js');
                  })();

                  PDFJS.workerSrc = 'pdfjs-dist-master/build/pdf.worker.js';
                }

            $("#pdfInp").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        showInCanvas(e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            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;
            }

            function showInCanvas(url) {
                // See README for overview
                'use strict';
                // Fetch the PDF document from the URL using promises
                var pdfAsArray = convertDataURIToBinary(url);
                PDFJS.getDocument(pdfAsArray).then(function (pdf) {
                    // Using promise to fetch the page
                    pdf.getPage(1).then(function (page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        // Prepare canvas using PDF page dimensions
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" >
        <p>
            <input type='file' id="pdfInp" />
            <canvas id="the-canvas" style="border:1px solid black"></canvas>
        </p>
    </form>
</body>
</html>

Upvotes: 3

Related Questions