Question

我想在浏览器中显示pdf而不将其存储在服务器上（我收集了很多存储pdf的例子，但它并不是我想要的）。问题是我无法找到让它在IE中工作的方法（我桌面上的当前版本是IE11）。 IE似乎不像URL.createObjectUrl。我尝试兼容模式＆＃34; Edge＆＃34;在我的浏览器中，但没有显示。这是我的代码：

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

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

使用Internet Explorer预览pdf，然后将其上传到服务器

1 个答案: