SharePoint 2016. QR-code

В SharePoint 2016 есть возможность генерации QR-кода для документа. В этом посте я покажу как это работает и как данную возможность можно использовать при создании решений на базе SharePoint.

Как пользоваться

В библиотеке документов при вызове диалога меню возле ссылки появилась новая кнопка:

При нажатии на кнопку откроется новое окно, в котором будет отображен QR-код и кнопки для управления его размером (уменьшить и увеличить):

Адрес страницы с QR-кодом имеет следующий вид:

http://spserver/_layouts/15/qr.aspx#qrCodeData=URL

QR-код является картинкой, сгенерированной JavaScript'ом на основе параметра qrCodeData в адресе, таким образом можно указать в нем любой адрес (любой текст):

Как это работает

Как я уже сказал, сгенерированный QR-код является изображением в формате data:image/png;base64. В примере со ссылкой на сайт http://subpointsolutions.com изображение в HTML выглядит вот так (переносы для удобства):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAB
CCAYAAADjVADoAAACe0lEQVR4Xu2aS3LDMAxD4/sf2l3UykyUYB5IKW5ls7uOZX
1AEAQVb/u+74/6e2wFxC8LCogjGwqIAuJVGIsRxYhixEezgKmxbVvKZfT2RM2jx
il7M2s//aEKCFcjWgRcA+qO7yPb5u/fp/+JrvZ+yFm6E7UNueOXB4JyXQFB76nI
EiNoXjswUUZkF6b3Lg+Eiqg6eK8VbRxpSD+fGi8B/zYjCojjmsPNcYo4PV+WEXS
w6PPTgcjWbVUu3xze4WRdILL7STvLUUN1GSAIeZeaszQju5/hqpFdeNbBVVl190
WMxqbLXYjG2Q6v63bpALSu+7yAiHafvcNTak9a4UZIzUPrZhmEjIiq/W2AoB6B2
vEosKM3VS5Dwoy4LRCUk9GcpwgRY6IXOqRtTwZT91lAtLIivL+LNAHpMoRuu+lm
DNchRtB9Ai1wWSDcqkCWmG6QRiNM+3wLUJQRtAAxqE+p6IFdq077nA6E0go6IAF
Cl70ECD0vIES9tw2Ve7tMPYIbKZdRrqUnUS8gmk0YFcsoAyj3SeRGL3qUEw4zot
9oAQGO03WexBD1nLSBNGF61XCNk6Sk+BCF5j0diGh3qSz1t3oF0gx3/6gR7kQU8
eWBcHOUqKqcJGkJRdy9vyDNQEYUEM1odNWBUoUi6PoEKss0j/v8OS5rqFxNIKus
tOPfA+HWfczJ5PebxEgXwGEfUUB0X8BQlRj9PcKNPH1HQVUprRGjjMhWIQXMckC
49Z4OTNXArVp/phGXA4JylyJCqaV6lVnOVJb9s33E8kAQE9wqQimiGOH6Emruhh
lxeyCiAKw6HrvPVQ8W3XcBcSBWQBQQr8lTjChGFCM+FpQftsjldyAuKuoAAAAAS
UVORK5CYII=" />

Скрипт, который отвечает за генерацию QR-кода в SharePoint 2016 находится по адресу /_layouts/15/qr.js. Скрипт этот доступен как в SharePoint 2016 on-prem, так и в SharePoint Online.

Теперь о том, как можно использовать данную фичу SharePoint 2016 при разработке своих решений.

Генерация QR-кода в своих решениях

Использовать генерацию QR-коды в SharePoint 2016 крайне просто, вот простой пример для генерации изображения со ссылкой на мой блог:

// Инициализация QR-code кодировщика
// Параметр указывает на логирование, false - выключено
var qr = QRCodeEncoder(false);
 
// Параметры генерации кода
var options = {
    "moduleSize": 3 // Размер кода, от 1 до 100
};
 
// URL-адрес
var url = "https://blog.vitalyzhukov.ru";
 
// Генерация base64 изображения
var qrCodeBase64 = qr.generateImg(url, options);

Параметр moduleSize отвечает за размер итогового изображения, может быть в пределах от 1 до 100. Ширина и высота изображения при этом равна moduleSize * 33px.

Поскольку вся генерация происходит на стороне клиента, то использовать данную фичу можно с легкостью в On-prem решениях, SharePoint Apps и в Office365.

Для примера я создам простое no-code решение, содержащее единственный сниппет для генерации QR-кода.

Демка

Решение будет содержать два поля: текстовое для ввода URL-адреса и числовое для указания размера QR-кода, и кнопку для инициализации самой генерации.

HTML-код фрагмента кода (я убрал стили для упрощения кода):

<div style="width:100%">
<!-- URL -->
<label for="qrCodeUrl">URL:</label>
<input type="text" id="qrCodeUrl" />
<br/>
 
<!-- Размер кода -->
<label for="qrCodeSize">Size:</label>
<input type="number" id="qrCodeSize" min="1" max="20" value="5" />
<br/>
 
<!-- QR-код -->
<label for="qrCodeImg">Image:</label>
<img id="qrCodeImg"/>
<br/>
 
<!-- Кнопка -->
<input type="button" onclick="javascript:RenderQRCode();" value="Получить QR-код" />
</div>

И JavaScript:

<div style="width:100%">
<!-- URL -->
<label for="qrCodeUrl">URL:</label>
<input type="text" id="qrCodeUrl" />
<br/>
 
<!-- Размер кода -->
<label for="qrCodeSize">Size:</label>
<input type="number" id="qrCodeSize" min="1" max="20" value="5" />
<br/>
 
<!-- QR-код -->
<label for="qrCodeImg">Image:</label>
<img id="qrCodeImg"/>
<br/>
 
<!-- Кнопка -->
<input type="button" onclick="javascript:RenderQRCode();" value="Получить QR-код" />
</div>

В итоге no-code решение в 20 строк, которое работает в on-prem:

и в Office365:

Пользуемся на здоровье!