由于测试目的,我目前正在编写一个简单的Android应用程序。在其中有一个WebView-Element,其中应显示资产文件夹中的html-File(带有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中,我收到以下chrome控制台输出,因为requestft pdf-page的呈现没有发生(仍然,标题正常显示)
I / chromium:[INFO:CONSOLE(22)]“Uncaught(in promise)TypeError:无法读取属性'getContext'的null”,source:file:/// android_asset /(22)
第22行引用
var context = canvas.getContext('2d');
当我通过webView.loadUrl(“http://www.dennissch.de/pdftest/”)从远程服务器(替换文件:/// - links)加载完全相同的文件时;一切正常。 那么为什么document.getElementById似乎不能在本地文件上工作呢?
答案 0 :(得分: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调用放在另一个脚本标记
中