0

由于测试目的，我目前正在编写一个简单的 Android 应用程序。其中有一个 WebView-Element，其中应显示资产文件夹中的 html 文件（使用 javascript (Mozilla PDFJS)）。从片段代码：

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);

内容已经包含以下 html：

<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';

PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
    mypdf = pdf;
    renderPage(currentPage);
});

function renderPage(pageNumber) {
    mypdf.getPage(pageNumber).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('viewer');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height-40;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });

}
</script>
....
<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
</body>

在 logcat 中，我收到以下 chromium 控制台输出，并且由于 requestet pdf-page 的呈现没有发生（仍然正常显示标题）

我/铬：[INFO：CONSOLE（22）]“未捕获（承诺）TypeError：无法读取null的属性'getContext'”，来源：file：///android_asset/（22）

第 22 行指

var context = canvas.getContext('2d');

当我通过 webView.loadUrl(" http://www.dennissch.de/pdftest/ ")从远程服务器加载完全相同的文件（替换文件：///-links ）时；一切正常。那么为什么 document.getElementById 似乎不适用于本地文件呢？

4

1 回答 1

0

这可能是因为您的脚本标签是在画布上方声明的。尝试将您的标签放在查看器下方，它应该可以工作

<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';

PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
    mypdf = pdf;
    renderPage(currentPage);
});

function renderPage(pageNumber) {
    mypdf.getPage(pageNumber).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('viewer');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height-40;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });

}
</script>
</body>

或者至少将 renderPage 的调用放在其他脚本标记中的查看器下方

于 2015-09-20T13:02:26.560 回答