带有 GWT 应用程序的 PDF.js 不起作用答案

【问题标题】：PDF.js with GWT application does not work带有 GWT 应用程序的 PDF.js 不起作用
【发布时间】：2012-11-18 12:42:25
【问题描述】：

我们有一个基于 GWT 框架的应用程序，我们希望在没有任何浏览器插件的情况下显示 PDF 文件，并且目前正在评估 PDF.js 以实现此目的。问题是，无论我做什么，我都无法在我们的 GWT 应用程序中将 PDF 文件渲染到画布上。请提供一些背景

从服务器检索 PDF 文件票证。

PDF.js 文件票证是从服务器检索并使用此脚本嵌入到 HTML 正文中

var head= document.getElementsByTagName('body')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.setAttribute('charset', 'UTF-8');
script.src=url;
head.appendChild(script);

在视图中创建画布元素（此处使用 google MVP 模式），并使用上述函数对将 PDF.js 嵌入 HTML 正文的脚本进行 JSNI 调用。然后该脚本调用与 PDF.js 文件中定义的 PDFJS 类一起使用的函数。

在画布上渲染 PDF 文件的功能如下：

PDFJS.disableWorker = true; 
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) 
{
    pdf.getPage(1).then(function getPageHelloWorld(page) 
    {
        var scale = 1.25;        
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({canvasContext: context, viewport: viewport});
        page.startRendering(context);
        alert("Finished rendering");  
    });
});

画布和上下文在 View 类中创建并传递给 javascript。

这里的问题是，在调用 JSNI 之后，我会显示所有变量的警报。浏览器显示警报，除非我发出呼叫警报（PDFJS）。这表明脚本中未识别 PDFJS 变量。这让我认为 PDF.js 文件没有正确嵌入到视图中，或者我还缺少其他东西。

注意：我已经通过网络下载了大部分示例，其中大部分都在本地工作，即我可以修改 PDF.js 文件路径以获取本地副本，并且 HTML 仍然呈现 PDF。读取 PDFJS 变量没有问题。只有在这个 GWT 应用程序中我才看到这些问题。

有没有人知道发生了什么。您的帮助将不胜感激。

谢谢

【问题讨论】：

标签： gwt pdf.js

【解决方案1】：

您的问题是您正在注入脚本，因此它异步加载，但您不要等到它加载后才开始使用它。

尝试使用ScriptInjector.FromUrl 注入脚本并将其余代码放入Callback 的onSuccess。

按照 Ilya 的建议，同步注入脚本（通过将其添加到您的 HTML 主机页面或 GWT 模块描述符——注意：不适用于 xsiframe 链接器——）当然也是一种解决方案。

【讨论】：

我终于能够使用 ScriptInjector.fromurl 注入脚本。原来我们需要在注入脚本时设置一个窗口。这意味着调用看起来像这样： ScriptInjector.fromUrl( "raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js" ).setCallback(new Callback().....).setWindow(SciptInjector.TOP_WINDOW).inject();

【解决方案2】：

尝试在您的 .gwt.xml 文件中添加 <script src="PDF.js"/> 并将 PDF.js 文件放入您的 public director

【讨论】：

在 gwt.xml 或 application.html 中？