javascript – Как скачать фрагмент страницы сайта вордпресс в формате PDF

Question

Сделал себе калькулятор на сайте вордпресс, и не получается скачать со страници сайта результат подсчетов калькулятора, в формате PDF.
Не могу найти информацию как это делать(с плагинами не хочется это делать)

Я в functions.php прописал jquery таким образом:
wp_enqueue_script(‘calk-js’,
get_template_directory_uri(). ‘/pub/js/calk.js’,
array(), filemtime( get_theme_file_path(‘/pub/js/calk.js’) ), true
);
Может типа этого сделать со скачиванием информации с сайта.. пока что, не получаестя..

Для теста, записал весь этот код в Visual Studio Code, там работает отлично.
скачивает в PDF формате, как положено.

Это фрагмент html калькулятора:

Услуга
Кол-во
ед. изм.
Цена (р)

Штробление стен ↓

Штроба 20х20(пенобетон)

+

м.п
0

Штроба 20х20(кирпич)

+

м.п
0

Штроба 20х20(бетон)

+

м.п
0

Штроба потолок до 20х20(бетон)

+

м.п
0

Итого:
0 руб.

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

Обнулить калькулятор

Это jquery для калькулятора:

function toggleCatalogBlock($btn, $block) {

$($btn).click(function() {
    $btn = $(this).attr("class");
    if($btn == 'show1'){$block='.t-row1'}
    if($btn == 'show2'){$block='.t-row2'}
    if($btn == 'show3'){$block='.t-row3'}
    if($btn == 'show4'){$block='.t-row4'}
    if($btn == 'show5'){$block='.t-row5'}
   if($btn == 'use-button'){return;}
   if($btn == 'per'){return;}
   
  

    var $blocks = $($block)
    if ($blocks.is(':hidden')) {
      $blocks = $($blocks.get().reverse());
      }
    
    toggleOne($blocks, 0);
  });
};

function toggleOne(blocks, index) {
  var block = blocks.eq(index);
  if (!block.length) return; 
  block.slideToggle(50, toggleOne.bind(null, blocks, index + 1));
}

$(document).ready(function() {


    toggleCatalogBlock('button')
    
    
});

var elems = document.getElementsByTagName('button');
for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', onGreen);
}

function onGreen() {
    this.style.backgroundColor="green"; // при первом срабатывании просто красит в красный
    this.removeEventListener('click',onGreen ); // при последующи - удаляет саму себя (красный)
    this.addEventListener('click', onSlategray); // ...и добавляет другой цвет (зеленый)
}

function onSlategray() {
    this.style.backgroundColor="Slategray"; // при первом срабатывании просто красит в зеленый
    this.removeEventListener('click', onSlategray); // при последующи - удаляет саму себя (зеленый)
    this.addEventListener('click', onGreen); // ...и добавляет другой цвет (красный)
}

$('.minpl, input').click(function() {
    /*Находим input*/
        $input = $(this).parent().find('.quant');
        var qty = Number($input.val());
    /*На случай, если количество не удалось определить (например, пользователь мог оставить поле пустым)*/
        if (isNaN(qty)) qty = 0;
        if ($(this).hasClass('plus')) {
            if (qty == 0) {
                qty = $input.data('min');
            } else {
                qty += $input.data('step');
            }
        } else {
            qty -= $input.data('step');
        }
        var min = $input.data('min');
        if (qty >= min)  {
            $input.val(qty).trigger('input');
        } else {
             $input.val(0).trigger('input');
        }
    /*Передаем функции подсчета, обновления*/
        updateCalc($input);
    
    /*Обрабатываем ввод с клавиатуры */
    $('.quant').change(function() {
        var qty = $(this).val();
        if (isNaN(qty)) qty = 0;
        var min = $(this).data('min');
        var step = $(this).data('step');
        if (qty > 0)  {
    /*Если вдруг число не кратно шагу, увеличиваем (только увеличение) до кратного*/
            qty = Math.ceil(qty/step)*step;
            if (qty < min) {
                qty = min;
            }
            $(this).val(qty).trigger('input');
        } else {
             $(this).val(0).trigger('input');
        }
        updateCalc($(this));
    });
    /*Считаем, обновляем значения*/
    function updateCalc($input){
        var qty = Number($input.val());
        if (isNaN(qty)) qty = 0;
        $input.parents('.t-row').find('.price').text(qty * $input.data('price')/$input.data('step'));
        var itog = 0;
        $input.parents('.calc').find('.price').each(function(){
            itog += parseInt($(this).text());
        });
        $input.parents('.calc').next().find('.val').text(itog);

    }
})                

$(".use-button").click(function() {

    $('td').each(function(){
        if($(this).text() == '0') {
          //$(this).remove();
          $(this).closest("tr").remove().replaceWith(function(){
            return this.value;
        });
        }
      });  
      
      $('.calc').find('input:text').replaceWith(function(){
         $(this).closest("tr").find(".minpl").remove().end();
        return this.value;
       
   }); 
    
     function generatePDF() {
const element = document.getElementById('invoice');
html2pdf()
    .from(element)
    .save();
     }       
  /* if($btn == 'per'){
    function ReloadButton()

{
location.href=”https://elektrik-n-spb.ru/stoimost-rabot-po-elektrike/”;
}
}*/
});

0
Николай Зусик 2 months 2022-11-27T15:39:08-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse