Столкнулся с такой задачей: нужно сохранить страницу Корзины (сайт на 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();
}
}
Кто сталкивался с подобной задачей? Подскажите, как решить?
Простой