js的window.print() 打印预览下载_js控制打印print下载-CSDN博客

本文链接：https://blog.csdn.net/tangtanglinli/article/details/134373623
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blob test</title>
    <style>
        /* //打印机媒体查询 默认打印背景颜色 */
        @media print {
            body {
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                -ms-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            button {
                display: none;
            }
        }
    </style>
</head>

<body>
    <button id="blob-txt">blob转txt下载</button>
    <button onclick="doPrint()">打印预览</button>
    <!--startprint-->
    <div id="demo" style="background-color: #fff;">
        <h2 style="background-color: blueviolet;">购物车</h2>
        <hr>
        <hr>
        <table>
            <tr>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr>
                <td>测试商品</td>
                <td>100</td>
                <td>1</td>
            </tr>
        </table>
        <hr>
        <hr>
        <h3>总价: 100.00元</h3>
    </div>
    <!--endprint-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    </script>

    <script>
        //字符串转base64
        function encode(str) {
            // 对字符串进行编码
            var encode = encodeURI(str);
            // 对编码的字符串转化base64
            var base64 = btoa(encode);
            return base64;
        }

        // base64转字符串
        function decode(base64) {
            // 对base64转编码
            var decode = atob(base64);
            // 编码转字符串
            var str = decodeURI(decode);
            return str;
        }

        function download() {
            var element = document.getElementById('demo')
            //    var element = $("#demo"); // 这个dom元素是要导出pdf的div容器
            var w = element.innerWidth; // 获得该容器的宽
            var h = element.innerHeight; // 获得该容器的高
            var offsetTop = element.offsetTop; // 获得该容器到文档顶部的距离
            var offsetLeft = element.offsetLeft; // 获得该容器到文档最左的距离
            var canvas = document.createElement("canvas");
            var abs = 0;
            var win_i = window.innerWidth; // 获得当前可视窗口的宽度（不包含滚动条）
            var win_o = window.offsetWidth; // 获得当前窗口的宽度（包含滚动条）
            if (win_o > win_i) {
                abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
            }
            canvas.width = w * 2; // 将画布宽&&高放大两倍
            canvas.height = h * 2;
            var context = canvas.getContext("2d");
            context.scale(2, 2);
            context.translate(-offsetLeft - abs, -offsetTop);
            // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此        
            // translate的时候，要把这个差值去掉
            html2canvas(element).then(function (canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 592.28 / contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else { // 分页
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save('订单信息.pdf');
            })
        }
        document.getElementById('blob-txt').onclick = function () {
            download()
        }
        //打印预览
        function doPrint() {
            console.log(33333333333)
            bdhtml = window.document.body.innerHTML;
            sprnstr = "<!--startprint-->";// 这是开始的标签
            eprnstr = "<!--endprint-->";// 这是打印的结束
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            window.print();
            window.document.body.innerHTML = bdhtml;//打印之后返回到原页面
        }
    </script>

</body>

</html>