DigitalLearning

Печать документа или сертификата

⚠️
Фича пока не работает с русским языком. Печатаются спец. символы и латиница.

Введение:

Итак, вы хотите чтобы слушатель курса вписал свою информацию в текстовое поле или несколько полей и затем распечатал памятку с этой информацией. Или распечатал сертификат по итогам прохождения теста.
Решений есть много. В интернете популярно использование библиотеки «pdfmake». Хорошее и работающее решение. Однако громоздкое и трудоемкое. Вам надо встраивать html файл в курс, прятать его и т. д. Много неудобств.
Есть решение проще. Мы используем:
  • Плагин split_text_to_size к библиотеке «jsPDF»
Решение прекрасно своей лаконичностью и возможностью быстро обновить его не переопубликовывая курс.

Действия:

  1. Создаем курс и на кнопку с JS скриптом вешаем триггер с любым содержанием. Сам скрипт напишем отдельно т. к. в AS может быть ограничение на длину строки. Публикуем курс.
  1. Открываем story.html / index_lms.html (смотря что сдо запускает. Чаще всего последнее) и подключаем новые скрипты. Можно в пустой 15 строке.
      2. <script src="story_content/jspdf.min.js" type="text/javascript"></script>
<script src="story_content/FileSaver.js" type="text/javascript"></script>
<script src="story_content/split_text_to_size.js" type="text/javascript"></script>
  1. Закидываем в папку «story_content» наши скрипты:
    1. Библиотеку jspdf.min.js
    2. Плагин split_text_to_size.js (он будет делить наш текст на новые строки при превышении длины)
    3. Библиотеку FileSaver
  1. Вписываем в иманифест наши скрипты
      2. <file href="story_content/jspdf.min.js" />
<file href="story_content/FileSaver.js" />
<file href="story_content/split_text_to_size.js" />
  1. Открываем в папке «story_content» user.js. Там ищем наш текст, который повесили на кнопку как JS. Подменяем его на скрипт.
      2. //Создаем PDF
  var doc = new jsPDF('landscape');
  
  //Подтягиваем переменные из AS
  var player = GetPlayer();
  name = player.GetVar("username");
  
  //Фон документа
  var imgData ='data:image/jpeg;base64,/9j/4AAQSkZ...... (очень много букв)CiiigD/2Q==';
  doc.addImage(imgData, 'png', 1, 1, 295, 209);
  
  //Указываем информацию и создаем ограничение на длину строк. Т.е. если превысит 150 пикселей - будет перенос
  string1 = name;
  var split1 = doc.splitTextToSize(string1, 150);
  
  //Параметры оформления предыдущего блока текста и позиция doc.text (отступ слева, сверху). Для каждого блока текста этот блок кода дублируется.
  doc.setFontStyle("normal");
  doc.setFontSize(16);
  doc.setFont("Arial");
  doc.setTextColor(0, 0, 0);
  doc.text(split1,180,85);
    
  //Сохранить документ
  doc.save('MyCertificate.pdf');
  1. Изменяем код под наши нужды:
    1. Вписываем наши переменные
    2. Вписываем форматирование и расположение каждого текстового блока
    3. Фон документа или сертификата указывается в формате base64 (конвенторы найдете в интернете. Загружаете картинку и получаете код. Вставляете между ’’)
  1. Готово!
badge