使用 pdf.js 出现异常 JavaScriptException: (ReferenceError): PDFJS is not defined答案

【问题标题】：Using pdf.js exception occur JavaScriptException: (ReferenceError): PDFJS is not defined使用 pdf.js 出现异常 JavaScriptException: (ReferenceError): PDFJS is not defined
【发布时间】：2013-01-04 18:22:15
【问题描述】：

    **In html file add script tag**



         <head>
             <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
            </head>
            <body>
             <button id="prev" onclick="goPrevious()">Previous</button>
                <button id="next" onclick="goNext()">Next</button>
                &nbsp; &nbsp;
                <span>Page: <span id="page_num"></span> 
                 <span id="page_count"></span></span>
              </div>

             <div>
                <canvas id="the-canvas" width="700" style="border:1px solid black"></canvas>
              </div>
            </body>

并在客户端 (pdf.java) 中使用 JSNI 调用 java 脚本函数，并将 pdf.js 文件粘贴到公共文件夹中并调用 .gwt.xml 类似

**I am just follow this link http://jsbin.com/pdfjs-prevnext-v2/1/edit**






            public void onModuleLoad() {
                alert1();
                }


            private native void alert1 ()
            /*-{
        var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

        PDFJS.disableWorker = true;

        var pdfDoc = null,
            pageNum = 1,
            scale = 0.8,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');

        function renderPage(num) {
            // Using promise to fetch the page
            pdfDoc.getPage(num).then(function(page) {
                var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
                canvas.height = viewport.height;
                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                page.render(renderContext);
            });


            document.getElementById('page_num').textContent = pageNum;
            document.getElementById('page_count').textContent = pdfDoc.numPages;
        }


        function goPrevious() {
            if (pageNum <= 1) return;
            pageNum--;
            renderPage(pageNum);
        }



        function goNext() {
            if (pageNum >= pdfDoc.numPages) return;
            pageNum++;
            renderPage(pageNum);
        }



        PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
            pdfDoc = _pdfDoc;
            renderPage(pageNum);
        });

            }-*/;

11:27:17.679 [错误] [pdf] 无法加载模块入口点类 com.ruchi.client.Pdf（有关详细信息，请参阅相关异常） com.google.gwt.core.client.JavaScriptException: (ReferenceError): PDFJS 未定义在 com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248) 在 com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke（ModuleSpaceOOPHM.java:136）在 com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561) 在 com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289) 在 com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107) 在 com.ruchi.client.Pdf.alert1(Pdf.java) 在 com.ruchi.client.Pdf.onModuleLoad(Pdf.java:27) 在 sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) 在 sun.reflect.NativeMethodAccessorImpl.invoke（未知来源）在 sun.reflect.DelegatingMethodAccessorImpl.invoke（未知来源）在 java.lang.reflect.Method.invoke（未知来源）在 com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) 在 com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200) 在 com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525) 在 com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363) 在 java.lang.Thread.run(Unknown Source)

    plz suggest me what i do....

【问题讨论】：

标签： gwt pdf.js

【解决方案1】：

您只是盲目地将 javascript 代码复制粘贴到 JSNI 块中。

例如，如果您的 html js 块中有

function test() {
  alert('hello');  
}

在你的 JSNI 中

private static native int test() /*-{
    var v = $wnd.test();
    return v;
  }-*/;

你有没有注意到 $wnd

1) HTML 应该有

    <span>Page: <span id="page_num"></span> of <span id="page_count"></span></span>
    <div>
        <canvas id="the-canvas" width="700" style="border: 1px solid black"></canvas>
    </div>

2) 将 pdf.js 移动到本地文件夹（通过 Internet 请求的 html 文件中的 aovid 脚本标签）

3) 在你的 module.gwt.xml 文件中添加 <script src="PDF.js" />。将https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js 复制到您的 GWT 的 public 文件夹中。

4) 修改你的 JSNI 代码

/*-{
    var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

    $wnd.PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 0.8,
        canvas =  $wnd.document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    function renderPage(num) {
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
            canvas.height = viewport.height;
            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            page.render(renderContext);
        });


       $wnd.document.getElementById('page_num').textContent = pageNum;
       $wnd.document.getElementById('page_count').textContent = pdfDoc.numPages;
    }
    function goPrevious() {
        if (pageNum <= 1) return;
        pageNum--;
        renderPage(pageNum);
    }

    function goNext() {
        if (pageNum >= pdfDoc.numPages) return;
        pageNum++;
        renderPage(pageNum);
    }

    $wnd.PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
        pdfDoc = _pdfDoc;
        renderPage(pageNum);
    });
    }-*/;

5) 你应该能够类似地解决 Next/Prev 问题。避免再提出一个问题来解决这个问题。你应该尝试做一些“家庭作业”

【讨论】：

注意：gwt.xml 中的<script> 不适用于xsiframe 链接器，并且该链接器是未来（理解：可能是唯一会更新的，并且可以替换std 链接器作为未来的默认链接器）。应该在主机页面中使用<script> 或ScriptInjector（FromUrl 或FromString 与TextResource 结合使用）。
@Thomas 那会是新的超级开发模式还是普通的托管模式？
与 dev 与 super-dev 与 prod 模式无关。
@SSR mam 正如你所说的，我首先阅读了很多 jsni 文档，但我不明白如何在 jsni 中调用 javascript 函数。这是我在 gwt 中使用 jsni 的第一个项目，在这个项目中我是使用 pdf.js..so 请帮助我...thanx in adance..
上面的代码 sn-ps 调出 pdf（只有 Next/Prev 按钮不可见），您需要更多 jsni 的东西。这是否解决了您的问题。

【解决方案2】：

JSNI 101：你必须使用$wnd.PDFJS 而不是PDFJS。

【讨论】：