Занесение данных для документа с предпросмотром

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

Вставляем наши данные в поля формы. Нажимаем кнопку Печать и выгружаем либо в PDF, либо выводим на принтер. 

Внутри используется HTML шаблон, в который на лету вставляются параметры из формы.

Плюс подхода - гибкость начального шаблона за счет использования HTML без задействования Word.

Минус - пользователь не может скачать файл и изменить в нем что-то через Word. Он может либо распечатать, либо сохранить как PDF.  

Как реализовать

Создаем форму с параметрами p1-p10 (или больше), g, doc. 

GetItem формы: 

CREATE PROCEDURE [dbo].[fm_watch_inputDocData_getItem]
    @itemID int,	
	@username nvarchar(256)

AS
BEGIN
	select 'ООО Тинькоф' p1, 'Иванов Иван Иванович' p2, 'тут указаны реквизиты....' p3, 'Москва' p4, '12.10.2022' p5,
    	dbo.as_htmlBlock('watch_docTemplate', 1) doc, newid() g
    
    select 'Занесите параметры договора, они сразу будут вставлены в шаблон справа' Subtitle, 'h3' headerTag
END

Здесь мы можем из базы подтянуть нужные данные (например, взять из карточки контрагента). 

Шаблон документа мы берем из HTML блока. В блок мы вставляем переменные со специальной разметкой (класс idd и data-code равен коду поля): 

<h3 class="text-center mb-3">Договор аутсорсинга<br>
  на оказание юридических услуг
</h3>
<div class="my-3 row">
  <div class="col">
    <span class="idd" data-code="p4"></span>
  </div>
  <div class="col text-right">
    <span class="idd" data-code="p5"></span>
  </div>
</div>

<p>
  <span class="idd" data-code="p2"></span>, именуемый в дальнейшем «Заказчик», в лице <span class="idd" data-code="p1"></span>, действующего
  на основании Устава, с одной стороны и ООО Петрович, именуемый в дальнейшем «Исполнитель», в лице Петрова Петра Петровича, действующего на основании устава, с другой стороны, в дальнейшем именуемые «Стороны», заключили настоящий договор о нижеследующем:
</p>
<h3>1. Предмет договора</h3>
<p>
  1.1. Исполнитель обязуется по заданию Заказчика оказывать следующие услуги по правовому обеспечению деятельности Заказчика:
</p>
....
<h3>Реквизиты: </h3>
<span class="idd" data-code="p3"></span>

Параметр g используется для работы кнопки Печать. 

Разметка формы: 

<div class="row">
  <div class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
      {form-title}
      {form-subtitle}
      {colwithlabel-p1}
      {colwithlabel-p2}
      {colwithlabel-p3}
      {colwithlabel-p4}
      {colwithlabel-p5}
    </div>
  </div>
  <div class="col-12 col-lg-6 col-xl-6">
    <div class="as-panel">
      <a href="#" class="btn btn-primary as-print float-right" data-cont="#{colview-g}"><i class="fa fa-print"></i> Print</a>

      <div id="{colview-g}">
        {colview-doc}
      </div>

    </div>
  </div>
</div>

Слева выдаем параметры, справа выдаем текст договора со вставленными параметрами.

Стилизация элементов вставки (CSS): 

<style type="text/css">
@media not print {
  .idd{   border: dashed 2px #0f0; padding: 2px; font-weight: bold; 
    min-width: 50px; min-height: 20px; }

}
</style>

Выводим элементы вставки с зеленой подсветкой. 

И немного магии на JS: 

<script>
$(function(){
  	var formCode='watch_inputDocData';
	$(document).delegate('.as-form[data-code='+formCode+'] input[type=text], .as-form[data-code='+formCode+'] textarea, .as-form[data-code='+formCode+'] select','keyup', function(){
      var el = $(this);
      var val = as.tools.replace(el.val(), '\n', '<br>');
      var code= el.closest('.as-form-item').attr('data-code');
     
      if(!code) return;
      var holder = $('.idd[data-code='+code+']', el.closest('.as-form'));
      holder.html(val);
      holder.addClass("text-success");
      setTimeout(function(){
      	holder.removeClass("text-success");
      }, 400)
      
	});
   	as.formcallbacks[formCode+"_getItem"] = function(){
   		$('.as-form[data-code='+formCode+'] :input').trigger('keyup');
   	}
  	
});
</script>

Здесь мы при изменении поля находим метку и подменяем ее значение с мерцанием поля.