在上传到服务器之前使用 Internet Explorer 预览 pdf答案

【问题标题】：preview pdf with internet explorer before uploading it on the server在上传到服务器之前使用 Internet Explorer 预览 pdf
【发布时间】：2016-05-11 10:54:38
【问题描述】：

我想在浏览器中显示 pdf 而不将其存储在服务器上（我有很多存储 pdf 的示例，但这不是我想要的）。问题是我无法找到让它在 IE 中工作的方法（我桌面上的当前版本是 IE11）。看来 IE 不喜欢 URL.createObjectUrl。我在浏览器中尝试兼容模式“Edge”，但没有显示任何内容。这是我的代码：

<!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>

我有一个在 IE 中工作但仅用于图像的示例。

<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;" />

有人已经让它在 IE 中工作了吗？我可以使用 Jquery，但无法安装 nodejs 之类的框架（我知道 Mozilla 项目 PDF.js，但它使用的是 nodejs）。

【问题讨论】：

PDF.js 没有使用 node.js；后者仅供开发人员使用。可以在 pdfjs-dist npm/bower repos 找到预构建 PDF.js 源代码。
你是对的，谢谢你的回答

标签： javascript jquery html internet-explorer pdf

【解决方案1】：

最后，可以在没有 nodejs 的情况下使用 pdf.js（感谢 async5）。

我现在使用 pdf.js（使用项目 https://github.com/mozilla/pdfjs-dist）在 IE (IE10+) 上工作的解决方案

就是这样：

<!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>

【讨论】：