使用pdf.js异常发生JavaScriptException：（ReferenceError）：PDFJS未定义 [英] Using pdf.js exception occur JavaScriptException: (ReferenceError): PDFJS is not defined
问题描述
**在html文件中添加脚本标记**
< head>
< script type =text / javascriptsrc =https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js>< / script>
< / head>
< body>
< button id =prevonclick =goPrevious（）>上一个< / button>
< button id =nextonclick =goNext（）> Next< / button>
& nbsp; &安培; NBSP;
< span>页面：< span id =page_num>< / span>
< span id =page_count>< / span>< / span>
< / div>
< div>
< canvas id =the-canvaswidth =700style =border：1px solid black>< / canvas>
< / div>
< / body>
，并且在客户端（pdf.java）使用JSNI调用java脚本funcion pdf.js文件放在公共文件夹中，并调用.gwt.xml文件，如
**我是只需按照此链接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'）;
函数renderPage（num）{
//使用promise获取页面
pdfDoc.getPage（num）.then（function（page）{
var viewport = page.getViewport（canvas.width / page.getViewport（1.0）.width）;
canvas.height = viewport.height;
//将PDF页面渲染到canvas上下文
var renderContext = {
canvasContext：ctx，
viewport：viewport
};
page.render（renderContext）;
}）;
document.getElementById（'page_num'）。textContent = pageNum;
document.getElementById（'page_count'）。textContent = pdfDoc.numPages;
}
函数goPrevious（）{
if（pageNum< = 1）return;
pageNum--;
renderPage（pageNum）;
函数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）
at sun.reflect.NativeMethodAccessorImpl.invoke0（Native Method）
at 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建议我做什么....
示例如果在您的html js块中，您有
函数测试（）{
alert（'hello'）;
$ / code $ / pre
$ b $ p在您的JSNI中
private static native int test（）/ * - {
var v = $ wnd.test（）;
return v;
} - * /;
您注意到使用 $ wnd
$ b 1）HTML应该有
< span> Page ：< span id =page_num>< / span> < span id =page_count>< / span>< / span>
< div>
< canvas id =the-canvaswidth =700style =border：1px solid black>< / canvas>
< / div>
2）将pdf.js移动到本地文件夹（html文件中的aovid脚本标记请求通过互联网）
3）请在您的module.gwt中添加< script src =PDF.js/> 。 xml文件。复制 https://raw.github.com/mozilla/ pdf，js / gh-pages / build / pdf.js 到你的GWT的公共文件夹中。
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'）;
函数renderPage（num）{
//使用promise获取页面
pdfDoc.getPage（num）.then（function（page）{
var viewport = page.getViewport（canvas.width / page.getViewport（1.0）.width）;
canvas.height = viewport.height;
//将PDF页面渲染到canvas上下文
var renderContext = {
canvasContext：ctx，
viewport：viewport
};
page.render（renderContext）;
}）;
$ wnd.document.getElementById（'page_num'）。textContent = pageNum;
$ wnd.document.getElementById（'page_count'）。textContent = pdfDoc.numPages;
}
函数goPrevious（）{
if（pageNum< = 1）return;
pageNum--;
renderPage（pageNum）;
函数goNext（）{
if（pageNum> = pdfDoc.numPages）return;
pageNum ++;
renderPage（pageNum）;
$ wnd.PDFJS.getDocument（url）.then（function getPdfHelloWorld（_pdfDoc）{
pdfDoc = _pdfDoc;
renderPage（pageNum）;
}）;
} - * /;
5）您应该可以同样解决Next / Prev。避免再提出一个问题来解决这个问题。你应该尝试做一些HOMEWork
**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>
<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>
and in client side (pdf.java) call a java script funcion using JSNI alse paste pdf.js file in public folder and call .gwt.xml like
**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 [ERROR] [pdf] Unable to load module entry point class com.ruchi.client.Pdf (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (ReferenceError): PDFJS is not defined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
at com.ruchi.client.Pdf.alert1(Pdf.java)
at com.ruchi.client.Pdf.onModuleLoad(Pdf.java:27)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Unknown Source)
plz suggest me what i do....
解决方案 You are just blindly copy pasting javascript code into JSNI block.
Example if in your html js block you have
function test() {
alert('hello');
}
In your JSNI
private static native int test() /*-{
var v = $wnd.test();
return v;
}-*/;
Do you notice the use of $wnd
1) HTML should have
<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) Move pdf.js to local folder ( aovid script tag in html file requesting over internet )
3) Instead add <script src="PDF.js" /> in your module.gwt.xml file. Copy https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js into your GWT's public folder.
4) Modify your JSNI code
/*-{
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) You should be able to solve Next/Prev similarly. Avoid raising one more question to solve that. You should try doing some "HOMEWork"
这篇关于使用pdf.js异常发生JavaScriptException：（ReferenceError）：PDFJS未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
