Detailed explanation of using canvas to save web pages as pdf files and supporting cross-domain

In the previous article, I mentioned that Canvas screenshots web pages into images. Here is a new requirement: screenshot web pages and save them as PDF files for users to download.

Using canvas to save web pages as pdf files supports cross-domain

Requirements: The user clicks download, saves the page as a PDF file and downloads it.

Idea: Continue to use Canvas to take screenshots and convert the canvas content into pdf files.

First we need to introduce the js file jspdf.debug.js download path https://github.com/MrRio/jsPDF

Introducing the js file of canvas, the official website homepage of the js file acquisition address: 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 button code

 <div id=down_pdf>Export to PDF button</div> <div class=sta-main>The div that needs to be obtained as PDF</div>

jsp code

 <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'); //Get width and height var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Enlarge the canvas canvas by 2 times, then place it in a small container to handle blur canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + px; canvas2.style.height = h + px; var context = canvas2.getContext(2d); //Process offset context.scale(1.5, 1.5); //Modify the background color, the default is black $('.sta-main').css(background, # fff) html2canvas( _canvas, { //Handle the issue of cross-domain pdf failure to obtain cross-domain information taintTest : false, useCORS : true, allowTaint : false, canvas : canvas2, dpi: 172, //Export pdf clarity onrendered: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //One page of pdf displays the canvas height generated by the html page; var pageHeight = contentWidth / 592.28 * 841.89 ; //HTML page height without pdf generated var leftHeight = contentHeight; //PDF page offset var position = 0; //The width and height of the canvas generated by the html page in the pdf image (size of a4 paper [595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg ', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //There are two heights that need to be distinguished, one is the actual height of the html page, and the page height of the generated pdf (841.89) //When the content does not exceed the display range of the pdf page, no paging is required 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; //Avoid adding blank pages if (leftHeight > 0) { pdf.addPage(); } } } pdf.save('PDF name.pdf'); } }) $('.sta-main').css(background, )})</script>

This time the webpage is changed to PDF, and the last screenshot of the webpage is PNG, using the same technology, both use Canvas to capture the canvas first and then convert the format.

There are also issues such as offset, blur, cross-domain, etc., which can be dealt with using the previous code.

Converting PDF will make the background color black. Just use css style to change the background color.

Perfect conversion to pdf.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.