Home > Article > Web Front-end > How to implement the function of converting html to pdf in JS
This article mainly introduces the function of converting html to pdf implemented by JS, and analyzes the specific operation skills of converting HTML format data into pdf based on the browser-side plug-in jsPDF in the form of a complete example. Friends in need can refer to the following
The example in this article describes the function of converting html to pdf implemented by JS. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html> <html> <head> <title>jsPDF插件</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://code.jquery.com/jquery-git.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> </head> <body> <p class="pdf-wrapper" ="to-pdf">HTML content...<h1>中文</h1> 中国,汉字,测试:合同 模版 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国</br>中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................<br/> 中国,汉字,测试:合同 模版 ...................<br/> 计费 接口 ....................<br/> <img src='http://www.jb51.net/images/logo.gif'/> </p> <script type="text/javascript"> var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; var options = { pagesplit: true }; //$('.pdf-wrapper') pdf.addHTML(document.body,options,function() { pdf.save('web1111.pdf'); }); </script> </body> </html>
Running effect:
The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.
Related articles:
vue-router project practice (detailed tutorial)
How to use the Lodash method in Angular?
About the use of Material in Angular2 (detailed tutorial)
The above is the detailed content of How to implement the function of converting html to pdf in JS. For more information, please follow other related articles on the PHP Chinese website!