Подробное объяснение использования Canvas для сохранения веб-страниц в формате PDF и поддержки междоменного доступа.

В предыдущей статье я упоминал, что Canvas преобразует веб-страницы в изображения. Вот новое требование: делать скриншоты веб-страниц и сохранять их в виде PDF-файлов для загрузки пользователями.

Использование холста для сохранения веб-страниц в виде файлов PDF поддерживает междоменный доступ.

Требования: пользователь нажимает кнопку «Загрузить», сохраняет страницу в виде PDF-файла и загружает ее.

Идея: продолжать использовать Canvas, чтобы делать снимки экрана и конвертировать содержимое Canvas в файлы PDF.

Сначала нам нужно указать путь загрузки js-файла jspdf.debug.js https://github.com/MrRio/jsPDF.

Представляем js-файл Canvas, официальную домашнюю страницу сайта с адресом приобретения js-файла: http://html2canvas.hertzen.com/

 <script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>

код кнопки div

 <div id=down_pdf>Кнопка «Экспорт в PDF»</div> <div class=sta-main>Div, который необходимо получить в формате PDF</div>

jsp-код

 <script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var Canvas2 = document .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //Получаем ширину и высоту var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Увеличиваем холст в 2 раза, затем помещаем его в небольшой контейнер для обработки размытия Canvas2.width); = w * 2; холст2.высота = h * 2; холст2.стиль.ширина = ш + пикселей; холст2.стиль.высота = ч + px; var context = Canvas2.getContext(2d); // Смещение процесса context.scale(1.5, 1.5); // Изменяем цвет фона, по умолчанию — черный $('.sta-main').css(background, # fff) html2canvas( _canvas, { //Решаем проблему сбоя междоменного PDF-файла при получении междоменной информации taintTest: false, useCORS: true,allowTaint: false, Canvas: Canvas2, dpi: 172, //Экспорт четкости PDF-файла при рендеринге: function (canvas) { var contentWidth = Canvas.width; var contentHeight = Canvas.height; //На одной странице PDF-файла отображается высота холста, созданная HTML-страницей; * 841.89 ; //Высота HTML-страницы без создания PDF-файла var leftHeight = contentHeight; //Смещение страницы PDF var Position = 0; //Ширина и высота холста, созданного HTML-страницей в изображении в формате PDF (размер бумаги формата А4 [595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = Canvas.toDataURL( 'изображение/jpeg', 1.0); вар PDF = новый jsPDF('', 'pt', 'a4'); //Необходимо различать две высоты: фактическую высоту HTML-страницы и высоту страницы сгенерированного PDF-файла (841.89). //Когда содержимое не выходит за пределы диапазона отображения. страницы PDF, разбиение на страницы не требуется if (leftHeight <pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, Position, imgWidth, imgHeight) leftHeight -= pageHeight; Position -= 841.89; //Избегайте добавления пустых страниц if (leftHeight > 0) { pdf.addPage() } }; pdf.save('Имя PDF.pdf'); } }) $('.sta-main').css(background, )})</script>

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

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

Преобразование PDF сделает цвет фона черным. Просто используйте стиль CSS, чтобы изменить цвет фона.

Идеальное преобразование в PDF.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.