javascript - JavaScript: converting pdf to bytes array and rendering the pdf in UI using HTML5

Question

I need the help on the below two things

1) I need to convert the PDF file data to bytes arrray in JavaScript .

2) Using the above bytes array, I need to render it in the UI as PDF file.

Questions may look like, why I want to convert the PDF file to bytes Stream and again why I want to show it as PDF in UI. But I need to figure out a way for the above two which helps me to solve many issues in my project.

Any suggestions for reading or solutions to above problems will be much appreciable.

Thanks for your time!

Answer 1

请检查 pdf.js。这可能会有所帮助 http://mozilla.github.io/pdf.js

Answer 2

以下代码将在本地读取文件并呈现 PDF。这会更快，因为文件不必上传到服务器并再次下载到浏览器。

<script type="text/javascript">
//Workaround for a bug on IE.
PDFJS.workerSrc = "pdf.worker.js";

//File from the input element                
inputElement.onchange = function(event) {

    var file = event.target.files[0];
    //Read the file locally using file reader
    var fileReader = new FileReader();  

    fileReader.onload = function() {
        var typedarray = new Uint8Array(this.result);

        // Render PDF
        PDFJS.getDocument(typedarray).then(function(pdf) {

            pdf.getPage(1).then(function getPageHelloWorld(page) {

                var scale = 1.5;
                var viewport = page.getViewport(scale);

                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                page.render({canvasContext: context, viewport: viewport});
            });
        });
    };

    // Read the file into array buffer.
    fileReader.readAsArrayBuffer(file);
}
</script>