Вставьте презентацию PowerPoint в HTML с помощью localhost

Я хочу использовать этот метод для загрузки презентации PowerPoint:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>

но я использую XAMMP для использования локального сервера, поэтому мне нужно что-то вроде этого

 <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[/file_name.pptx]' width='100%' height='600px' frameborder='0'>

Это возможно? Заранее спасибо.


person July    schedule 05.07.2019    source источник


Ответы (1)


Вы можете использовать ngrok, чтобы открыть локальный веб-сервер в Интернете (бесплатной версии должно быть достаточно).

Это действия, которые я выполнил, чтобы запустить это на моем локальном хосте. Я проверил это с фиктивной презентацией.

1. Создайте учетную запись ngrok

Перейдите на сайт ngrok и создайте бесплатную учетную запись. Затем возьмите свой авторизационный токен.

2. Установите ngrok на свой компьютер

Запустите следующие команды в командной строке (Linux или Windows с использованием WLS):

sudo apt-get install ngrok-client
ngrok authtoken [enter_your_authtoken_here]
ngrok http 80

Последняя команда предоставит вашему локальному веб-серверу общедоступный URL-адрес. Это предполагает, что вы уже используете веб-сервер на локальном хосте (порт 80).

3. Подготовьте код для встраивания

Сохраните файл .html с кодом для встраивания, замените атрибут src, чтобы включить новый URL-адрес, предоставленный ngrok. Убедитесь, что ваше имя_файла.pptx также доступно на локальном хосте.

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>

Соответственно замените https://www.your_website URL-адресом, сгенерированным ngrok. (Вы можете получить открытый URL-адрес из командной строки, см. рисунок ниже).

Пример: показывает запущенный в консоли ngrok

Это все. Вот пример, показывающий результаты, которые я получил, протестировав фиктивную презентацию с использованием этого подхода.

введите здесь описание изображения

person julianm    schedule 05.07.2019