Javascript阅读文档和PDF

时间:2014-10-15 11:46:06

标签: javascript jquery html

我正在尝试从文档和pdf文件中提取文本并将它们放在文本区域中。

我的代码如下:

<html>
    <head>
        <title>FileReader Example</title>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script type="text/javascript" charset="utf-8">
            function upload(){
                document.getElementById("image_src").click();
            }

            $("document").ready(function () {
                $("#image_src").change(function () {
                    readBlob();
                });
            });

            function readBlob() {
                var files = document.getElementById('image_src').files;
                if (!files.length) {
                    alert('Please select a file!');
                    return;
                }

                var file = files[0];
                var start = 0;
                var stop = file.size - 1;
                var reader = new FileReader();

                // If we use onloadend, we need to check the readyState.
                reader.onloadend = function (evt) {
                    console.log(evt.target.result);
                    console.log(evt.target.data);
                    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                        document.getElementById('byte_content').textContent = evt.target.result;
                    }
                };

                var blob = file.slice(start, stop + 1);
                reader.readAsBinaryString(blob);
            }
        </script>

        <style>
            #image_src {
                position:absolute;
                left:-9999px;
            }
            #img {
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img id="img" src="images/ChooseFile.png" onclick="upload()" alt="hellp"/>
            <input type="file" name="image_src" id="image_src" />
            <pre id="fileDisplayArea"><pre>
            <div id="byte_content"></div>
        </div>
    </body>
</html>

我遇到的唯一问题是文本显示为垃圾,但如果我上传文本文件就可以了。出了什么问题?

1 个答案:

答案 0 :(得分:2)

PDF 是一种二进制格式,它可能包含注释,表单字段,视频和Flash动画等交互式元素。

如果您需要使用PDF文档,我建议您查看PDF.js项目。

我找到了一些可能有助于您入门的API文档: