Да, вы можете настроить предпросмотр файлов, таких как документы Word, PDF, изображения и текстовые файлы, непосредственно на веб-сайте, используя одну библиотеку. Одной из самых популярных библиотек для этой задачи является PDF.js, которая позволяет отображать файлы PDF в веб-браузере. Для других форматов, таких как изображения и текстовые файлы, вы можете использовать HTML5 и JavaScript.
Вот пример, как можно реализовать предпросмотр различных типов файлов с помощью HTML и JavaScript:
1. **HTML разметка**:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Предпросмотр файлов</title>
<style>
#preview {
border: 1px solid #ccc;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<input type="file" id="fileInput" />
<iframe id="preview" src="" frameborder="0"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
const fileType = file.type;
const fileURL = URL.createObjectURL(file);
if (fileType === 'application/pdf') {
preview.src = fileURL;
} else if (fileType.startsWith('image/')) {
preview.src = fileURL;
} else if (fileType === 'text/plain') {
const reader = new FileReader();
reader.onload = function(e) {
const textContent = e.target.result;
preview.srcdoc = `<pre>${textContent}</pre>`;
};
reader.readAsText(file);
} else {
alert('Данный формат файла не поддерживается для предпросмотра.');
}
});
</script>
</body>
</html>
```
### Что делает этот код:
- Создает поле для загрузки файла и `iframe` для вывода предпросмотра.
- Использует `FileReader` для чтения текстовых файлов и динамически вставляет их содержимое в `iframe`.
- Загружает изображения и PDF-файлы напрямую в `iframe` с помощью `URL.createObjectURL`.
### Обратите внимание:
- PDF.js используется здесь только для PDF-файлов. Для изображений и текстов применяется стандартный подход с использованием HTML и JavaScript.
- Ваша библиотека должна поддерживать формат файлов, которые вы хотите проверить.
- Этот пример не обрабатывает ошибки и не поддерживает другие расширенные форматы, как DOCX, но возможно интегрировать дополнительные библиотеки для таких форматов, например, Docx.js для DOCX документов.
Эта база может быть расширена и изменена в зависимости от ваших нужд и предпочтений.