程序人生网站首页 程序人生

javascript分页打印(非lodop)

发布时间：2024-07-05 23:24:06编辑：雪饮阅读（）

依赖：

import html2Canvas from 'html2canvas';

核心打印方法：

async function prtSc(){



    const loadingInstance = ElLoading.service({});

    var pages=[];



    var parentElements = document.querySelectorAll('#NbAllPage');

    parentElements.forEach(function(parentElement) {

        var childElements = parentElement.querySelectorAll('.page');

        childElements.forEach(function(childElement) {

            pages.push(childElement);







        });

    });



    var dataUrlList=[];

    for(var i in pages){

        var element=pages[i];

        var rect = element.getBoundingClientRect();

        var heightWithBorder = rect.height;

        var pageScreenShotRes=await html2Canvas(element, {

            allowTaint: true,

            useCORS: true,

            // 提升画面质量，但是会增加文件大小

            scale: 2,

            // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！

            height: heightWithBorder,

            windowHeight: element.scrollHeight,

        });

        console.log("pageScreenShotRes",pageScreenShotRes);

        var dataURL = pageScreenShotRes.toDataURL('image/png');

        dataUrlList.push(dataURL);



    }

    var message={

        type:'canvasDataUrl',

        data:dataUrlList

    };

    var iframe = document.getElementById('iframePrintContainer');

    iframe.contentWindow.postMessage(message, '*');

    loadingInstance.close();

    return false;

}

Iframe实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列印</title>

    <script src="/vue.global.js"></script>

    <style>

        *{

         padding:0;

            margin:0;

        }

        .page{

            margin: 0 auto;

            padding:0;

            width: 860px;



            page-break-after:always;

            margin-bottom:10px;

        }

        .page img{

            width: 100%;

            height:100%;

        }

        @media print {

            .page {

                /* A4纸张宽度 */

                width: 8.27in;

                /* A4纸张高度 */

                height: 11.69in;

                /* 其他打印样式 */

            }

        }

    </style>

</head>

<body>

<div id="prints">

    <template v-for="(item,index) in dataUrlList">

        <div class="page"><img :src="item"/></div>

    </template>



</div>

<script>

    var canvas=localStorage.getItem("canvas");

    console.log("收到的canvas",canvas);

    const { createApp, ref,nextTick } = Vue;

    const dataUrlList=ref([]);



    // 监听来自父页面的消息

    window.addEventListener('message', function(event) {

        if (event.origin !== 'http://parent-page-origin.com') { // 应替换为父页面的实际源

            // 如果不是预期的源，则忽略消息

            //return;

        }

        console.log('Received from parent:', event.data);

        if(event.data.type=="canvasDataUrl"){

            dataUrlList.value=event.data.data;

            nextTick(()=>{

                window.print();

            });



        }

    }, false);





    createApp({

        setup() {

            const message = ref('Hello vue!');

            setTimeout(function(){

               // window.print();

            },500);

            return {

                message,

                canvas,

                dataUrlList

            }

        }

    }).mount('#prints')

</script>

</body>

</html>
效果

关键字词：javscript打印

上一篇：tol24.com16-1(现在进行时)

下一篇：python转pdf为html

无相关信息

您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

javascript分页打印(非lodop)

相关文章

您当前的位置：首页 > 慢生活 > 程序人生网站首页程序人生