Отображение содержимого pdf файла на сайте?

Question

[Рамазан Ахриев]

Доброй ночи.
Хотел бы узнать возможно ли отобразить содержимое pdf на сайте именно содержимое а не просто открыть pdf в новой вкладке где есть кнопки такие как распечатать, скачать и так далее. чтобы содержимое отобразилось так:
https://dozhdikdesign.ru/bikepoint
Начиная фотки с байка, возможно ли это реализовать

Comments

[DIVSIDE]

Нет, так как в примере нельзя. Это сайт... А пдф, это контейнер для картинок, текста и тд. + он не интерактивен. Максимум что можешь сделать, это показывать через iframe. И выглядеть это будет как на новой вкладке

Answer 1

[Aetae]

Можно взять pdf.js и допилить как тебе надо. Будет жирно и тяжело.
Либо моджно сохранить pdf как набор картинок и просто положить их на сайт. Будет просто и жирно.

Comments

[Рамазан Ахриев]

То есть я смогу отображать, каждую А4 страницу как фотографию?
Я делаю портфолио для друга дизайнера, используя Sanity, и чтобы не добавлять большую CMS, хотел бы узнать возможно ли сделать такой вариант, pdf презентации друга большие.

[Рамазан Ахриев]

Просто и жирно

[Aetae]

Что не понятно то? Всё в ответе. Ну вот тебе тот же ответ другими словами:
1. Есть библиотека pdf.js которая умеет читать и отображать pdf в браузере, но не так как ты хочешь. Её можно вставить на любой сайт. Она опенсорс. Ты можешь её доработать как тебе надо(или заказать доработку на фрилансе если компетенции недостаточно).
2. Ты можешь сохранить pdf как обычный набор картинок любой программой для работы с pdf. Ты можешь подключить эти картинки на любую страницу любого сайта через стандартный тэг img.

[Рамазан Ахриев]

Aetae,
- Просто и жирно - Это означало что я выбрал этот способ и всё работает.

Answer 2

[Zettabyte]

Раньше можно было embed'дить документы гугл к себе на сайт, не только ПДФ.
Сейчас - не скажу, плюс надо следить, чтобы не отвалилось.

Также изучите сайты крупных сетевых супермаркетов. Насколько я помню, я видел, что больше, чем у одного каталог наподобие "акции этой недели" на самом деле был файлом .ПДФ как-то хитро вставленным на сайт.
Там и зум, и листание, и, возможно, миниатюры страниц (этот момент уже подзабыл).

У кого конкретно такое видел - увы, не вспомню, не вчера было.

Также можете посмотреть на сайты наподобие scribd и прочие, выкладывающие мануалы и даташиты. Пользователи туда обычно как раз PDF загружают.

чтобы содержимое отобразилось так:

Это не ПДФ.

ПДФ у той девушки выложен в виде ссылки "Моё портфолио в pdf" в подвале сайта: https://cloud.mail.ru/public/3Kav/6muKQ2Zoy

Answer 3

[Qoragar]

То есть я смогу отображать, каждую А4 страницу как фотографию?

Простейший способ, строго на ванильном HTML+CSS+JS — iframe. Насколько помню, работает в любом более-менее современном браузере.

Дешёво и сердито:

<div id="BlockForPDFpages">
     <iframe class="elPDF" id="PDF_Page01" src=""></iframe> 
</div>

<style>
	.elPDF {
		display: block;
		position: relative;
		width: XX; /*Рассчитать ширину и высоту под пропорции страницы*/
		height: YY; /*Рассчитать ширину и высоту под пропорции страницы*/
		overflow: hidden; /*Убрать скроллбары*/
		z-index: 0;

		/*...
		Прочая стилизация iframe (позиционирование, рамки и т.д.)
		...*/
	}

	/*Накладываем поверх фрейма "защитный экран",
	чтобы контент внутри случайно не скроллился
	(плюс, как полезный побочный эффект — нельзя сохранить через ПКМ):*/
	#elPDF::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top 0;
		left: 0;
		background-color: rgba(0,0,0,0);
		pointer-events: none;
		z-index: 1;
	}
</style>

<script>
	function ViewPDFpage(PageNum) {
		document.getElementById("elPDF ").contentWindow.location =
			"./source.pdf"
			+ "#toolbar=0&page="
			+ String(PageNum)
			+ "&view=Fit";
	}

	ViewPDFpage(5); /*Во фрейме будет страница 5*/
</script>

Параметры — начинаются с #, разделитель &:

• toolbar=0 — скрывает всё, кроме самой страницы;
  
• page=String(PageNum) — номер страницы, которая откроется во фрейме;
  
• view=Fit — страница заполняет всю область фрейма по ширине и/или высоте.
  

Для многостраничного документа — запустить циклом генерацию фреймов в BlockForPDFpages (через document.write или innerHTML+=) и циклом ViewPDFpage с разными номерами страниц для каждого фрейма.

P.S. Понятно, что исходный вопрос уже решён "в лоб" через картинки. Всего лишь предложил более универсальный вариант — сугубо ради академического интереса (да и сам сейчас вожусь как раз с PDF на сайте)).