JavaScript：将 pdf 转换为字节数组并使用 HTML5 在 UI 中呈现 pdf答案

【问题标题】：JavaScript: converting pdf to bytes array and rendering the pdf in UI using HTML5JavaScript：将 pdf 转换为字节数组并使用 HTML5 在 UI 中呈现 pdf
【发布时间】：2013-05-06 11:09:08
【问题描述】：

我需要以下两件事的帮助

1) 我需要将 PDF 文件数据转换为 JavaScript 中的字节数组。

2) 使用上述字节数组，我需要在 UI 中将其呈现为 PDF 文件。

问题可能看起来像，为什么我想将 PDF 文件转换为字节流，以及为什么我想在 UI 中将它显示为 PDF。但我需要为上述两个找到一种方法，以帮助我解决项目中的许多问题。

对于上述问题的阅读或解决方案的任何建议将是非常可观的。

感谢您的宝贵时间！

【问题讨论】：

标签： javascript rendering

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：