<!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://netnr.eu.org/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://netnr.eu.org/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<!--渲染网页内容(可选)-->
<link rel="stylesheet" href="https://netnr.eu.org/netnrmd@4.0.0/dist/netnrmd.css" />
<script src="https://netnr.eu.org/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();