SharePoint 2016. QR-code

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

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

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

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

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

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

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

QR-code SharePoint 2016

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

Как я уже сказал, сгенерированный 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 крайне просто, вот простой пример для генерации изображения со ссылкой на мой блог:

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

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

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

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

Демка

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

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

  1. <div style="width:100%">
  2. <!-- URL -->
  3. <label for="qrCodeUrl">URL:</label>
  4. <input type="text" id="qrCodeUrl" />
  5. <br/>
  6.  
  7. <!-- Размер кода -->
  8. <label for="qrCodeSize">Size:</label>
  9. <input type="number" id="qrCodeSize" min="1" max="20" value="5" />
  10. <br/>
  11.  
  12. <!-- QR-код -->
  13. <label for="qrCodeImg">Image:</label>
  14. <img id="qrCodeImg"/>
  15. <br/>
  16.  
  17. <!-- Кнопка -->
  18. <input type="button" onclick="javascript:RenderQRCode();" value="Получить QR-код" />
  19. </div>

И JavaScript:

  1. <script src='/_layouts/15/qr.js'></script>
  2. <script>
  3. function RenderQRCode(){
  4.   var url = document.getElementById('qrCodeUrl').value;
  5.   var size = parseInt(document.getElementById('qrCodeSize').value);
  6.   var img = document.getElementById('qrCodeImg');
  7.   var qr = QRCodeEncoder(true);
  8.   qr.margin = 0;
  9.   img.setAttribute('src', qr.generateImg(url, {"moduleSize": size}));
  10. }
  11. </script>

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

QR-code SharePoint 2016

и в Office365:

QR-code SharePoint Online

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


Поделиться

Коментарии