Снова используем OneDrive и Google Диск. Таблица внедряется на сайт через элемент <iframe>. Корректное отображение контейнера в <iframe> зависит от версии языка разметки вашей страницы — <!DOCTYPE>.
OneDrive — Microsoft
Заходим в OneDrive (требуется авторизация или регистрация). Добавляем файл электронной таблицы. Открываем.
Далее, Файл → Общий доступ → Внедрить.
Настройки и размер по вкусу. Копируем на выбор код внедрения или код JavaScript — вставляем в нужное место страницы.
Пример.
Google Диск — Документы
Заходим в Google Диск (требуется авторизация или регистрация). Добавляем файл электронной таблицы. Открываем через Google Таблицы.
Далее, Файл → Опубликовать в Интернете → Встроить.
Копируем и вставляем код в нужное место страницы.
Пример.
Excel для Интернета SharePoint в Microsoft 365 Office для бизнеса Еще…Меньше
Хотите поделиться файлом из OneDrive? Прочтите эту статью.
Так как внедренные Excel в Интернете теперь включены в SharePoint Online, их можно использовать на веб-странице или в блоге, где другие пользователи могут просматривать и взаимодействовать с ними без необходимости входа в SharePoint Online. Вы можете получить URL-адрес книги, размещенной в Microsoft 365, и внедрить ее непосредственно в блог или на веб-страницу, задав значение атрибута SRC элемента <iframe>.
Следуйте приведенным ниже инструкциям, чтобы внедрить SharePoint Online в Excel в Интернете бизнес-аналитики на веб-странице или в блоге.
-
Настройка разрешений для книги
-
Получение URL-адреса общедоступной книги
-
Настройка дополнительных параметров
-
Настройка размера фрейма
-
Проверка опубликованной книги
-
Ограничения для внедренных книг
Настройка разрешений для книги
Перед внедрением книги в блог или на веб-страницу убедитесь, что доступ к ней предоставлен всем, кому нужно. Например, если вы ведете общедоступный блог, нужно поделиться книгой со всеми пользователями, включая тех, кто не является сотрудниками вашей организации. Вот как предоставить общий доступ к книге:
-
В SharePoint Online щелкните меню Дополнительно (…) рядом с книгой, к которой вы хотите предоставить общий доступ, и выберите команду Поделиться.
-
В окне Пригласить пользователей выберите Все и Могут просматривать.
Примечания:
-
Администратор SharePoint мог заблокировать возможность приглашать всех для просмотра книги. В таком случае выберите значение Все, кроме внешних пользователей или обратитесь к администратору.
Флажок Требовать вход должен быть в любом случае снят, чтобы был возможен анонимный доступ.
-
Иногда администраторы SharePoint блокируют анонимный доступ, удаляя поле Требовать вход и присваивая этому параметру значение «Истина». В этом случае обратитесь к своему администратору.
-
Невозможно изменить внедренную Excel в Интернете, но пользователи с нужным разрешением могут открыть внедренную книгу в Excel, где они смогут редактировать данные.
-
-
Чтобы предоставить доступ к книге гостям, снимите флажок Требовать вход и нажмите кнопку Поделиться.
Получение URL-адреса общедоступной книги
-
В меню Дополнительно (…) рядом с книгой выберите гостевую ссылку.
-
Выделите URL-адрес гостевой ссылки, скопируйте его и вставьте в Блокнот.
-
Чтобы использовать внедренную книгу, измените URL-адрес следующим образом:
-
Чтобы книга выводилась как внедренная, добавьте в конце URL-адреса параметр action=embedview.
-
Чтобы в книге можно было использовать фильтры и сводные таблицы, добавьте параметр wdAllowInteractivity=True.
-
Для использования функций бизнес-аналитики, таких как визуализации Power View, сводные таблицы и срезы на основе модели данных, добавьте строку &wdbipreview=True.
-
Советы:
-
Конечный URL-адрес должен выглядеть примерно так:
-
https://host/personal/user/_layouts/15/guestaccess.aspx?guestaccesstoken=2UdAHGlFpWVaJjkI32xuisKCQsULG6M6b%2fIjG1LYpRM%3d&docid=166d02b42f5a1443781a1de428d9518ee&action=embedview&wdbipreview=true
Настройка дополнительных параметров
Дополнительные параметры URL-адреса позволяют изменить способ вывода внедренной книги.
Вот пример URL-адреса с дополнительными параметрами:
<iframe width=»500″ height=»200″ frameborder=»0″ scrolling=»no» src=» https://host/personal/user/_layouts/15/guestaccess.aspx?guestaccesstoken=2UdAHGlFpWVaJjkI32xuisKCQsULG6M6b%2fIjG1LYpRM%3d&docid=166d02b42f5a1443781a1de428d9518ee&action=embedview&wdbipreview=true&wdHideSheetTabs=true&wdAllowInteractivity=True& Item=PivotTable1& ActiveCell=B4&wdHideGridlines=True &wdHideHeaders=True& wdDownloadButton=True”>
В следующей таблице показаны параметры, которые мы использовали в этом примере URL-адреса, и кратко описывается их влияние на презентацию книги. Кроме того, в ней указано, какие значения используются по умолчанию.
|
Параметр URL-адреса |
Действие |
По умолчанию |
|---|---|---|
|
wdHideSheetTabs=True |
Скрывает ярлычки, которые отображаются внизу всех листов в книге. |
False |
|
wdAllowInteractivity=True |
Позволяет сортировать и фильтровать данные в таблицах и сводных таблицах книги. |
True |
|
Item=название_элемента |
Выводит определенный элемент. Если книга содержит диаграмму, таблицу, сводную таблицу или именованный диапазон и на веб-странице необходимо отобразить только этот элемент, его можно указать с помощью параметра Item. Сведения об именованных диапазонах и именованных элементах в книгах Excel см. в статье Определение и использование имен в формулах. |
Не задано |
|
ActiveCell=имя_ячейки |
Определяет, какая ячейка будет активной (выбранной) во внедренной книге при открытии веб-страницы. Ячейку можно указать путем ссылки на нее (например, A1) или по имени. С помощью этого параметра также можно определить активный лист, выбрав ячейку на нем. Если вы хотите сделать активным лист Power View, задайте для этого параметра значение A1, хотя на листе Power View нет сетки. Если активная ячейка не задана, будут показано последнее сохраненное представление. |
Выводится последнее сохраненное представление. |
|
wdHideGridlines=True |
Скрывает линии сетки на листе. |
False |
|
wdHideHeaders=True |
Скрывает заголовки строк и столбцов. |
False |
|
wdDownloadButton=True |
Выводит кнопку Скачать, которая позволяет скачать копию книги.
|
False |
Настройка размера фрейма
Вы можете изменить размер фрейма, в котором книга выводится на веб-странице, с помощью стандартных свойств HTML. Найдите значения ширины и высоты (в пикселях) внутри тега iframe и измените их, чтобы получить нужный размер.
<iframe width=»201″ height=»173″ frameborder=»0″ scrolling=»no»
Проверка опубликованной книги
Убедитесь, что опубликованная вами внедренная книга доступна для анонимных пользователей. Вот на что стоит обратить внимание:
-
Для полной поддержки Power View требуется Silverlight. В HTML5 некоторые возможности Power View могут быть ограничены.
-
Наличие лицензии может обеспечивать для создателя iframe или владельца файла привилегированный доступ, которого может не быть у других пользователей. Чтобы убедиться в том, что другие люди могут просмотреть внедренную книгу, получите к ней доступ, открыв браузер в частном режиме. Вот как это сделать:
-
Откройте браузер в частном режиме. Например, щелкните Начать просмотр InPrivate в Internet Explorer или Новое окно в режиме инкогнито в Chrome.
-
Перейдите к опубликованной записи блога.
-
Просмотрите внедренную книгу и поработайте с ней.
-
Ограничения для внедренных книг
|
Свойство |
Верхний предел |
|---|---|
|
Размер книги |
10 МБ |
|
Количество одновременно просматривающих пользователей |
1000 Примечания:
|
См. также
Интерактивные визуализации и сводные таблицы Power View теперь можно внедрять в блоги и веб-сайты
Нужна дополнительная помощь?
Like you, I cannot get MS Office Web Components to work. I would not consider Google Docs since Google seems to think they own anything that passes through their hands. I have tried MS Publish Objects but the quality of the generated html/css is truely awful.
The secret of converting an Excel worksheet to html that will display correctly on a smartphone is to create clean, lean html/css.
The structure of the HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
HEAD
</head>
<body>
BODY
</body>
</html>
There are useful html elements that can replace «HEAD» but it is not clear to me how you would generate them from an Excel worksheet. They would need to be added separately.
The obvious output for a worksheet or a range is an html table so the following assumes BODY will be replaced by an html table.
The structure of an html table is:
<table TABLE-ATTRIBUTES>
<tr TABLE-ROW-ATTRIBUTES>
<td TABLE-CELL-ATTRIBUTES>CELL-VALUE</td>
More <td>...</td> elements as necessary
</tr>
More <tr>...</tr> as necessary
</table>
Include as few TABLE-ATTRIBUTES, TABLE-ROW-ATTRIBUTES and TABLE-CELL-ATTRIBUTES as possible. Do not set column widths in pixels. Use css attributes rather than html attributes.
A table attribute worth considering is style = "border-collapse: collapse;". The default is separate with a gap around each cell. With collapse the cells touch as they do with Excel.
Three table attribute worth considering are style="background-color:aliceblue;", style="color:#0000FF;" and style="text-align:right;". With the first, you can specify the background colour to be any of the fifty or so named html colours. With the second, you can specify the font colour to be any of 256*256*256 colours. With the third you can right-align numeric values.
The above covers only a fraction of the formatting information that could be converted from Excel to html/css. I am developing an add-in that will convert as much Excel formatting as possible but I hope the above helps anyone with simple requirements.
Не секрет, что Excel довольно мощный инструмент для работы с числовыми табличными данными. Однако средства, которые предоставляет Microsoft для интеграции с ним, далеки от идеала. В частности, сложно интегрировать в Excel современные пользовательские интерфейсы. Нам нужно было дать пользователям Excel возможность работать с довольно насыщенным и функциональным интерфейсом. Мы пошли несколько другим путем, который в итоге показал хороший результат. В этой статье я расскажу, как можно организовать интерактивное взаимодействие Excel c веб-приложением на Angular и расшить Excel практически любым функционалом, который реализуем в современном веб-приложении.
Итак, меня зовут Михаил и я CTO в Exerica. Одна из проблем которые мы решаем — облегчение работы финансовых аналитиков с числовыми данными. Обычно они работают как с исходными документами финансовой и статистической отчетности, так и каким-либо инструментом для создания и поддержания аналитических моделей. Так сложилось, что 99% аналитиков работают в Microsoft Excel и делают там довольно сложные вещи. Поэтому перевести их с Excel на другие решения не эффективно и практически невозможно. Объективно, «облачные» сервисы электронных таблиц до функционала Excel пока не дотягивают. Но в современном мире инструменты должны быть удобны и соответствовать ожиданиям пользователей: открываться по клику мышки, иметь удобный поиск. А реализация в виде разных несвязанных приложений будет довольно далека от ожиданий пользователя.
То с чем работает аналитик выглядит примерно так:
Основные данные тут — это числовые «финансовые показатели», например, доход за 1 квартал 2020 года. Для простоты буду называть их дальше просто «числами». Как видно, почти никакой связи между числами в документе и в аналитической модели нет, все только в голове у аналитика. И работа с заполнением и поддержанием модели занимает часы поиска и перебивания чисел из документа в таблицы, а потом поиск ошибок ввода. Вместе этого мы хотели бы предложить пользователю привычные инструменты: «перетаскивание», вставка через клипборд и так далее, а также быстрый просмотр исходных данных.
Что у нас уже было
К моменту, когда мы начали реализацию интерактивного взаимодействия с Excel в виде, изложенном в этой статье, у нас уже была база данных на MongoDB, бэкэнд в виде REST API на .NET Core, фронтовое SPA на Angular и некоторые другие сервисы. Мы к этому моменту уже пробовали разные варианты интеграции в приложения электронных таблиц, в том числе и в Excel, и все они не пошли дальше MVP, но это тема отдельной статьи.
Связываем данные
В Excel существует два распространенных инструмента, с помощью которых можно решить задачу связывания данных в таблице с данными в системе: RTD (RealTimeData) и UDF (User-Defined Functions). Чистый RTD менее удобен для пользователя в плане синтаксиса и ограничивает гибкость решения. С помощью UDF можно создать кастомную функцию, которая будет работать привычным для Excel-пользователя образом. Ее можно использовать в других функциях, она понимает ссылки типа A1 или R1C1 и вообще ведет себя как надо. При этом никто не мешает использовать механизм RTD для обновления значения функции (что мы и сделали). UDF мы разрабатывали в виде Excel addin с использованием привычного нам C# и .NET Framework. Для ускорения разработки мы использовали библиотеку Excel DNA.
Кроме UDF наш addin реализует ribbon (панель инструментов) с настройками и некоторыми полезными функциями по работе с данными.
Добавляем интерактивность
Для передачи данных в Excel и налаживания интерактива мы разработали отдельный сервис, который предоставляет подключение по Websocket при помощи библиотеки SignalR и фактически является брокером для сообщений о событиях, которыми должны обмениваться «фронтовые» части системы в реальном времени. Он у нас называется Notification Service.
Вставляем данные в Excel
В нашем SPA мы подсвечиваем все числа, которые обнаружила система. Пользователь может выделять их, навигировать по ним и т.п. Для вставки данных мы реализовали 3 механизма, чтобы закрыть различные варианты использования:
- Перетаскивание (drag-and-drop)
- Автоматическая вставка по клику в SPA
- Копирование и вставка через клипборд
Когда пользователь инициирует drag’n’drop некоторого числа из SPA, для перетаскивания формируется ссылка с идентификатором этого числа из нашей системы (.../unifiedId/005F5549CDD04F8000010405FF06009EB57C0D985CD001). При вставке в Excel наш addin перехватывает событие вставки и парсит регэкспом вставляемый текст. При обнаружении валидной ссылки на лету подменяет ее на соответствующую формулу =ExrcP(...).
При клике на числе в SPA через Notification Service отправляется сообщение в addin, содержащее все необходимые данные для вставки формулы. Далее формула просто вставляется в текущую выделенную ячейку.
Эти способы хороши, когда пользователю нужно вставлять в свою модель по одному числу, но если надо перенести целую таблицу или ее часть, необходим другой механизм. Наиболее привычным для пользователей представляется копирование через клипборд. Однако этот способ оказался сложнее первых двух. Дело в том, что для удобства вставляемые данные должны быть представлены в нативном для Excel формате — OpenXML Spreadsheet. Наиболее просто это реализуется используя объектную модель Excel, то есть из addin’а. Поэтому процесс формирования клипборда у нас выглядит так:
- Пользователь выделяет область с числами в SPA
- Массив выделенных чисел передается на Notification Service
- Notification Service передает его в addin
- Addin формирует OpenXML и вставляет его в клипборд
- Пользователь может вставить данные из клипборда в любое место любой Excel-таблицы.
Несмотря на то, что данные проделывают довольно долгий путь, благодаря SignalR и RTD происходит это довольно быстро и абстрагированно от пользователя.
Распространяем данные
После того, как пользователь выбрал начальные данные для своей модели, их надо «распространить» все периоды (года, полугодия и кварталы), которые представляют интерес. Для этих целей одним из параметров нашей UDF является дата (период) данного числа (вспоминаем: «доход за 1 квартал 2020 года»). В Excel существует нативный механизм «распространения» формул, который позволяет заполнить ячейки той же формулой с учетом ссылок, заданных в параметрах. То есть вместо конкретной даты в формулу вставлена ссылка на нее, а далее пользователь «распространяет» ее на другие периоды, при этом в таблицу автоматически загружаются «те же» числа из других периодов.
А что это там за число?
Теперь у пользователя есть модель на несколько сотен строк и несколько десятков столбцов. И у него может возникнуть вопрос, что же там за число в ячейке L123? Чтобы получить ответ, у нас ему достаточно кликнуть на эту ячейку и в нашем SPA откроется тот самый отчет, на той самой странице, где записано кликнутое число, а число в отчете будет выделено. Вот так:
А если это не просто одно число из отчета, а результат некоторых вычислений на числах, взятых из отчета, то мы подсветим все числа, входящие в вычисляемое в Excel выражение. При этом не происходит загрузки всего приложения и подгрузки всех необходимых данных, как в случае перехода по ссылке.
В качестве заключения
Вот такая, на мой взгляд, нестандартная реализация взаимодействия между Excel и веб-приложением получилась довольно удобной для пользователя. Благодаря использованию Excel порог входа для пользователей из целевой аудитории довольно низкий. При этом мы получаем также всю мощь Excel по работе с числовыми данными. Сами данные всегда остаются связанными с источником, а также связанными во времени. Для целевых клиентов нет необходимости встраивать в бизнес-процесс работы с данными абсолютно новые внешние системы. Наше решение встраивается как дополнительный «инструмент» внутри Excel, что является стандартом де-факто для провайдеров финансовых данных.
Подобный архитектурный подход к интеграции веб-приложений с Microsoft Excel может быть применим и для решения других задач, требующих интерактива и сложных пользовательских интерфейсов при работе с числовыми и табличными данными.
With Microsoft Excel and OneDrive, sharing spreadsheets is easy. Using OneDrive’s embed feature, you can put your spreadsheet in any web page where readers can not just look at it, they can actively work on it, sorting, filtering and calculating their own data. This is a great option if you are a financial planner, for example, and want your website visitors to calculate their own rates of return on investments.
Show Excel Sheet in HTML Page
-
Open OneDrive
-
If your Excel workbook isn’t already stored in OneDrive, save a copy of it there. Then, log into OneDrive.Live.com.
-
Select Your Excel File
-
In OneDrive, right-click on the file thumbnail and select «Embed» from the drop-down menu. A new panel appears on the right side of the web page.
-
Generate the Embed Code
-
Click the «Generate» button on the right side of the web page. A preview of the embedded spreadsheet appears with the embed code beneath it. You can copy the code now or customize it by clicking the link that says «Customize how this embedded workbook will appear to others.» A new tab opens in your browser showing your customization options.
-
Insert the Code Into Your HTML Page
-
Open your HTML page on your blog or website, or by using your favorite HTML editor. Place the cursor where you want the spreadsheet to appear and press «Ctrl-V» on the keyboard to paste it there. Whenever you make a change to the spreadsheet in OneDrive, the changes will automatically appear on your Web page.
Customizing the Embedded Spreadsheet
If the worksheet you want to share, for example, isn’t the first in the workbook, you will have to customize the code first.
What to Show: Select which cells you want to appear on the website by clicking the Select a Range option and then drag the the cursor over the cells you want to appear. If there are multiple workbooks, or tables, in the same file you can select which one to appear by selecting the Table option.
Appearance: Here, you can hide or show the spreadsheet’s grid lines and headers. You can also specify whether or not you want a download link to appear below the website in the right corner.
Interaction: The options in this section determine whether or not readers can interact with the spreadsheet. This includes whether or not they can sort and filter data, or type their own data into cells. Anything they change will not be saved. If you do want them to be able to interact, you can specify a cell to place the cursor before they begin.
Dimensions: This section lets you specify the height and width of the embedded spreadsheet.
Preview: This shows you what the embedded spreadsheet will look like as you make changes to the customization options. If you click the «View Actual Size» link, it opens in a new tab on your browser.
Understanding the Embed Code
Microsoft uses an Javascript iframe, or inline frame, to place one document (your spreadsheet) inside another documen_t_ (your web page). Within this small piece of code is the link to your OneDrive Excel worksheet, followed by information on how to present this embedded document: its width, height, border and whether or not the reader can scroll within the worksheet. A web developer can modify these attributes if needed after you have copied and pasted the code. Most blogs and websites have Javascript enabled, but if you are making the web page yourself, you will need to add Javascript to it.
Tip
WordPress doesn’t usually allow iframes to be placed in blog posts, but it makes an exception for Excel and other Microsoft Office iframe codes.
Using SharePoint or OneDrive for Business
If your company uses Microsoft SharePoint, or if you have a OneDrive for Business account, you will need to ensure you have permission to share an Excel workbook with others before you can embed it in a web page. You then need to set the share permissions to «Everyone» in SharePoint. Microsoft offers detailed instructions on how to customize the embed code in SharePoint.