Question

我有一个网站，显示浏览器中嵌入的pdf文件。它的代码如下：

document.getElementById("bigone").innerHTML = 
'<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';

基本上使用innerHTML插入带有PDF作为其数据的对象标签（“bigone”是表格单元格）。这完全正常，但有时PDF需要花费很长时间才能加载，并且用户面临着一个空白屏幕。我想在后台下载pdf文件时插入图像预加载器（如文本“LOADING ...”）。

我在JS中使用了Image对象但没有成功。

document.getElementById("bigone").innerHTML = '<img src="gradients\\loading.png" />'
var pdf = new Image();
pdf.src = "\\PDF\\somefile.pdf";
pdf.onLoad = function() {
document.getElementById("bigone").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
}

这不起作用，预加载器图像出现，但不会被嵌入的PDF替换。我将pdf.onLoad放在一个警报中，它返回null。我的代码或任何人提供的任何想法有什么问题吗？感谢。

Answer 1

您无法将PDF文件加载到图像对象中...图像对象用于图像。

我要做的是在HTML中创建一个DIV元素，该元素是将在OBJECT元素中的PDF文件的容器。

然后我可以将background-image样式属性设置为加载图片，这样当加载PDF时，人们可以在后台看到“加载”图像，一旦PDF加载，它就会出现在加载图片让人们再也看不到了。

<td id="bigone">
    <div id="pdf_container" style="background-image: url('\\gradients\\loading.png'); background-repeat: none; background-position: 50% 50%; height: 720px; width: 100%;">
    </div>
</td>

<script type="text/javascript">
    document.getElementById("pdf_container").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
</script>

报废，您可以将背景图像应用于表格单元格，而不必制作新的DIV元素。

在Javascript中创建PDF预加载器

1 个答案: