使用 PDFObject 显示加载指示器答案

【问题标题】：Show loading indicator with PDFObject使用 PDFObject 显示加载指示器
【发布时间】：2016-08-28 05:15:20
【问题描述】：

我需要在加载 PDF 时显示某种指示器。我正在显示生成和嵌入可能需要 40 秒或更长时间的 PDF。

我知道我可以检查 PDFObject 是否嵌入成功（使用this 示例）。但是，这并不能指示文件何时完成下载。

我也知道我可以设计它。但是，这也不起作用，因为它在 PDF 加载后保留了该样式。此外，虽然我可以设置对象的边框、定位、高度等样式，但我无法让 cursor 之类的属性起作用：

#pdf object {
  border: 5px solid red;       // does work, but still shows up after the PDF loads
  cursor: progress !important; // doesn't work
}

有什么方法可以查看文件何时成功下载？

【问题讨论】：

考虑改用PDF.JS。它有一个内置的加载进度条。虽然浏览器支持不太好。

标签： javascript jquery pdfobject

【解决方案1】：

很遗憾，PDF 阅读器（包括原生阅读器和第三方，如 Adobe Reader）不提供加载百分比详细信息。 PDFObject 无法知道文件有多大，或者加载文件需要多长时间。

【讨论】：

我正在考虑添加一个在加载 pdf 时隐藏的微调器。我希望这些库中的一个在文件完成加载后会有某种回调，但我想不会。
只有在有办法验证文件是否已完成加载时才能进行回调。此功能未添加到 PDF 阅读器。它在 Flash 中可用，这就是为什么您会看到如此多的 SWF 加载指示器，但 PDF 阅读器行业并没有效仿。

【解决方案2】：

我知道这仍然是一篇旧帖子，但如果您仍在寻找解决方案。您可以尝试将<div> 设为相对位置，然后将 div 内的微调器设为绝对值，z-index 为 99，然后 pdfobject 也具有相对位置，z-index 99 这样 pdfobject 将位于微调器之上看起来像是加载了pdf。

div.container {
width: 100%;
height: 100%;
display: block;
position: relative; }

#spinner {
position: absolute;
z-index: 99; }

#pdf-container {
width: 100%; /* optional */
margin: 0 auto; /* optional */
border-bottom: 1px solid #666; /* optional */
position: absolute;
z-index: 99; }

【讨论】：