jquery将网页html文档导出为pdf图片
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>网页截图测试</title> |
| </head> |
| <body> |
| <div id="layout-wrapper"> |
| <h4 id="import">导出</h4> |
| </div> |
| <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> |
| <script src="../../js/jquery-3.2.1.min.js"></script> |
| <script> |
| $(document).ready(function () { |
| function exportToPDF() { |
| // 获取你想要转换为 PDF 的 DOM 元素 |
| var element = document.getElementById('layout-wrapper'); |
| // 使用 html2canvas 把 DOM 转换成 canvas |
| html2canvas(element, { |
| allowTaint: true, |
| useCORS: true, // 如果包含跨域图片，需要开启 CORS 支持 |
| }).then((canvas) => { |
| // 将 canvas 转换为图像数据 |
| const imgData = canvas.toDataURL('image/jpeg', 1.0); // 或者 'image/png' |
| // 初始化一个新的 jsPDF 对象 |
| const pdf = new jsPDF(); |
| // 添加图像到 PDF 文档中 |
| pdf.addImage(imgData, 'JPEG', 10, 10, 180, 160, undefined, 'FAST'); // 图片位置与尺寸可调整 |
| |
| // 保存 PDF 文件 |
| pdf.save('output.pdf'); |
| }); |
| } |
| // 调用函数并设定PDF文件名 |
| // exportPageToPDF('MyWebpage'); |
| $("#import").click(function () { |
| exportToPDF(); |
| }) |
| }) |
| </script> |
| </body> |
| </html> |
| |
| |
