Как передавать страницу Корзины wp в pdf с возможностью копировать текст?

Question

[Евгений Леонов]

Столкнулся с такой задачей: нужно сохранить страницу Корзины (сайт на wp + woo) в pdf (с мобильного в png, но это уже отдельный код - пока это не меняю) с возможностью копировать текст после в этом pdf файле. Получается, что нет продажи на сайте, а из добавленных позиций нужно сформировать товарную накладную. По структуре накладной требований нет особых - подходит готовая верстка страницы Корзина.

Наглядно здесь mywp.01sh.ru/eisen_wp/katalog -> Добавляем товар в корзину -> Переходим в корзину -> Сформировать товарную накладную.

С помощью html2pdf сделал так. Из страницы нужно убрать заголовок и кнопки, делаю копию страницы, скриншот и далее в pdf:

function generateNote(button) {
        if(checkDevice()) {
			const original = document.querySelector('.catalog');
			const clone = document.querySelector('.catalog').cloneNode(true);
			const countProducts = document.querySelectorAll('.catalog-card').length;
			
			clone.querySelector('.section__heading').remove();
			clone.querySelectorAll('.specifications-btn').forEach(item => {
				item.remove();
			})
			
        
            html2pdf(clone, {
                filename: 'накладная.pdf',
                margin: 1,
                jsPDF: { hotfixes: ["px_scaling"], unit: 'px', format: [original.offsetHeight, original.offsetWidth ], orientation: countProducts > 1 ? 'p' : 'l' }
            });
            openGenerateModal();
        } else {
			const wrapper = document.querySelector('body');
			const clone = document.querySelector('.catalog .container').cloneNode(true);
			
			clone.classList.add('clone');
			clone.querySelector('.section__heading').remove();
			clone.querySelectorAll('.specifications-btn').forEach(item => {
				item.remove();
			})
			
			wrapper.appendChild(clone);
			
            html2canvas(clone).then(canvas => {
                var image = canvas.toDataURL();
                // Create a link
                var aDownloadLink = document.createElement('a');
                // Add the name of the file to the link
                aDownloadLink.download = 'накладная.png';
                // Attach the data to the link
                aDownloadLink.href = image;
                // Get the code to click the download link
                aDownloadLink.click();
            })
			
			document.querySelector('.clone').style.display = 'none';

            openGenerateModal();
        }
    }

Пробовал без html2pdf, просто jsPDF. Но стили не получается применить никак и шрифт не тянется. Читал документацию, так со шрифтом и не получилось, а про стили вообще ничего не нашел. Так текст могу копировать, но вместо текста абракадабра:

function generateNote(button) {
        if(checkDevice()) {
			const original = document.querySelector('.catalog');
			const clone = document.querySelector('.catalog').cloneNode(true);
			const countProducts = document.querySelectorAll('.catalog-card').length;
			
			clone.querySelector('.section__heading').remove();
			clone.querySelectorAll('.specifications-btn').forEach(item => {
				item.remove();
			})
			
            var pdf = new jsPDF({ hotfixes: ["px_scaling"], unit: 'px', format: [original.offsetHeight, original.offsetWidth ], orientation: countProducts > 1 ? 'p' : 'l' }); 
            var specialElementHandlers = {
            '#ignorePDF': function (element, renderer) {
                return true;
            }
            }; 

            pdf.fromHTML(original, 0, 0, {
                'width': 150,
                'elementHandlers': specialElementHandlers
            }, function() {
                pdf.save('saveInCallback.pdf');
            });

            
            openGenerateModal();
        } else {
			const wrapper = document.querySelector('body');
			const clone = document.querySelector('.catalog .container').cloneNode(true);
			
			clone.classList.add('clone');
			clone.querySelector('.section__heading').remove();
			clone.querySelectorAll('.specifications-btn').forEach(item => {
				item.remove();
			})
			
			wrapper.appendChild(clone);
			
            html2canvas(clone).then(canvas => {
                var image = canvas.toDataURL();
                // Create a link
                var aDownloadLink = document.createElement('a');
                // Add the name of the file to the link
                aDownloadLink.download = 'накладная.png';
                // Attach the data to the link
                aDownloadLink.href = image;
                // Get the code to click the download link
                aDownloadLink.click();
            })
			
			document.querySelector('.clone').style.display = 'none';

            openGenerateModal();
        }
    }

Кто сталкивался с подобной задачей? Подскажите, как решить?

Answer 1

[Refguser]

Подскажите, как решить?

Легко!

Тем более что

По структуре накладной требований нет особых