Блог

Главная - Вопросы по программированию - как сохранить страницу в формате pdf на мобильном устройстве с тем же разрешением экрана, что и на рабочем столе

как сохранить страницу в формате pdf на мобильном устройстве с тем же разрешением экрана, что и на рабочем столе

#javascript #mobile #viewport #jspdf #html2canvas

Вопрос:

Я использую jspdf для сохранения страницы на моем сайте в формате pdf. На рабочем столе это выглядит великолепно. С другой стороны, на мобильных устройствах, поскольку пропорции совершенно разные, pdf-файл, который я получаю, искажен и в нем отсутствуют важные элементы. Короче говоря, ничего, с чем я мог бы работать. Вы можете увидеть это на моем сайте: https://ohad-shaked-cv.web.app/

Код, который отвечает за создание pdf-файла, выглядит следующим образом:

 html2canvas(document.body)
            .then((canvas) => {
                const imgData = canvas.toDataURL('image/png', 0.75);
                const imgProps = page.getImageProperties(imgData);
                const pdfWidth = page.internal.pageSize.getWidth();
                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
                page.addImage(imgData, 'png', 0, 15, pdfWidth, pdfHeight,'','FAST');
                page.save('My C.V.pdf');
            });

Ответ №1:

Вы можете изменить видовое окно перед вызовом html2canvas, а затем вернуть ему прежнее значение.

 document.querySelector('meta[name=viewport]').setAttribute("content", "width=1200");

Ознакомьтесь с этим вопросом на github для получения дополнительной информации.

Метки: ,