Создание предварительного загрузчика PDF в Javascript - PullRequest
Новая
       0

Создание предварительного загрузчика PDF в Javascript

3 голосов
/ 16 февраля 2011

У меня есть веб-сайт, который отображает PDF-файл, встроенный в браузер. Код для этого ниже: 

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

В основном используется innerHTML для вставки тега объекта с PDF в качестве данных («bigone» - это ячейка таблицы). Это прекрасно работает, но иногда PDF-файлы имеют большой размер для загрузки, и пользователь сталкивается с пустым экраном. Я хочу вставить предварительный загрузчик изображений (например, текст «ЗАГРУЗКА ...»), пока файл PDF загружается в фоновом режиме.

Я использовал объект Image в JS, но безуспешно. 

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 внутри оповещения, и он вернул ноль. Что-то не так с моим кодом, или есть идеи, которые кто-нибудь может предложить? Спасибо.

1 Ответ

4 голосов
/ 16 февраля 2011

Вы не можете загрузить файл PDF в объект Image ... объект Image предназначен для изображений.

Что бы я сделал, это создал бы элемент DIV в HTML, который является контейнером для файла PDF, который будет находиться в элементе OBJECT.

Тогда я мог бы установить атрибут стиля 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 тоже.

...