<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <title>export pdf</title> <script src="https://ss.netnr.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script src="https://ss.netnr.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script> <!--渲染网页内容(可选)--> <link rel="stylesheet" href="https://ss.netnr.com/netnrmd@4.0.0/dist/netnrmd.css" /> <script src="https://ss.netnr.com/netnrmd@4.0.0/dist/netnrmd.js"></script> </head> <body> <div> <button class="btn-page">PDF (page)</button> <button class="btn-nopage">PDF (no-page)</button> </div> </body> </html>
body>div { max-width: 1000px; margin: 2em auto; padding: 2em 2em 4em; }
let nrPdf = { init: async () => { await nrPdf.buildHtml(); document.querySelector('.btn-page').addEventListener('click', async function () { await nrPdf.buildPDF(true); }); document.querySelector('.btn-nopage').addEventListener('click', async function () { await nrPdf.buildPDF(false); }); }, domMarkdown: null, buildHtml: async () => { let resp = await fetch('https://zme.ink/README.md'); let md = await resp.text(); md = md.replaceAll('src="static/', 'src="https://zme.ink/static/'); let mds = []; for (let i = 0; i < 5; i++) { mds.push(`\r\n---\r\n`); mds.push(`# ${i + 1}`); mds.push(`\r\n---\r\n`); mds.push(md); } nrPdf.domMarkdown = document.createElement('div'); nrPdf.domMarkdown.innerHTML = netnrmd.render(mds.join('\r\n')); document.body.appendChild(nrPdf.domMarkdown); }, buildPDF: async (isPag) => { let canvas = await html2canvas(nrPdf.domMarkdown, { scale: 2, backgroundColor: '#fff', useCORS: true, logging: false }); if (isPag) { let a4w = 595.28; let a4h = 841.89; let pageHeight = (canvas.width / a4w) * a4h; let leftHeight = canvas.height; let position = 0; let imgHeight = (a4w / canvas.width) * canvas.height; let pageData = canvas.toDataURL('image/jpeg', 0.92); let pdf = new window["jspdf"].jsPDF('', 'pt', 'a4'); if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, a4w, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, a4w, imgHeight); leftHeight -= pageHeight; position -= a4h; if (leftHeight > 0) { pdf.addPage(); } } } pdf.save('page.pdf'); } else { let width = nrPdf.domMarkdown.offsetWidth / 4; let height = nrPdf.domMarkdown.offsetHeight / 4; let limit = 20000; if (height > limit) { let contentScale = limit / height; height = limit; width *= contentScale; } let context = canvas.getContext('2d'); let orientation; if (context) { context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; } let pageData = canvas.toDataURL('image/jpeg', 0.98); let img = new Image(); img.src = pageData; img.onload = function () { img.width /= 2; img.height /= 2; img.style.transform = 'scale(0.5)'; let pdf; orientation = width > height ? 'l' : 'p' pdf = new window["jspdf"].jsPDF(orientation, 'mm', [ width, height ]); pdf.addImage( pageData, 'jpeg', 0, 0, width, height ); pdf.save('no-page.pdf'); }; } } } nrPdf.init();