标题 View
公开
私有分享码
评论
标签
<!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();