jspdf处理分页、高清

其他 2020-09-09 10:13:30 阅读次数: 0

通过jspdf.js将一个页面或者一个div保存成pdf，然后可以通过pdf.js查看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  
    <style>
        .mapClass{
            width: 500px;
            height: 500px;
        }

    </style>

</head>
<body style="text-align:center;width: 100%;height: 100%">
<div style="width: 200px;height: 90px;background: red" onclick="jsPrintPdf()">点击打印pdf</div>
<div id="pdfPrint" style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 100%;height: 100%;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main2" style="width: 600px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <div class="printBox" style="width:650px;padding:10px;">
        <!--第一页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
        <!--第2页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
    </div>
    <div class="printBox" style="width:650px;padding:10px;">
        <!--第一页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
        <!--第2页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
    </div>
    <div class="printBox" style="width:650px;padding:10px;">
        <!--第一页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
        <!--第2页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
    </div>
    <div class="printBox" style="width:650px;padding:10px;">
        <!--第一页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
        <!--第2页-->
        <div>
            <p>标题xxxxx</p>
            <div class="imgWrap">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
                <img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
            </div>
            <p>
                <span>日期: 2018-07-11</span>
                <span>备注：xxxxx</span>
            </p>
        </div>
    </div>
</div>



</body>
<script type="text/javascript">

    var option2 = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option2);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>




<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/canvas2image.js"></script>
<script type="text/javascript" src ="js/html2canvas.min.js"></script>
<script type="text/javascript" src ="js/jspdf.debug.js"></script>
<script>

//    function jsPrintPdf(){
//        $('#pdfPrint').css("background","#fff");
//
//
//        var width =  $('#pdfPrint').offsetWidth; //获取dom 宽度
//        var height =  $('#pdfPrint').offsetHeight; //获取dom 高度
//        var canvas = document.createElement("canvas"); //创建一个canvas节点
//        var scale = 2; //定义任意放大倍数 支持小数
//        canvas.width = width * scale; //定义canvas 宽度 * 缩放
//        canvas.height = height * scale; //定义canvas高度 *缩放
//        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
//
//        var filename = '物流单.pdf';
//        var pdf = new jsPDF('p', 'mm','a4');
//        var options = {
//            pagesplit: true,
//            scale: scale // 添加的scale 参数
//        };
//        pdf.addHTML($("#pdfPrint"),options, function(){
//            pdf.output("save", filename);
//        });
//    }


页面转canvas再转PDF
//function jsPrintPdf(){
//    var s = $('#pdfPrint');
//    var pdf = new jsPDF('', 'pt', 'a4');
//    var imgArr = new Array();
//    for (var index = 0; index < s.length; index++) {
//        html2canvas(s[index], {
//            useCORS: true,
//            scale: 2,
//            background: "#F5F5F5",
//            onrendered: function (canvas) {
//                var img = new Image();
//                img.width = canvas.width;
//                img.height = canvas.height;
//                img.src = canvas.toDataURL('image/jpeg', 1.0);
//                imgArr.push(img)
//                createPdf(pdf,imgArr,s.length);
//            },
//        })
//    };
//}
//
//var createPdf = function (pdf,Arr, s) {
//    if (Arr.length == s) {
//        for (var i = 0; i < Arr.length; i++) {
//            pdf.addImage(Arr[i].src, 'JPEG', 0, 0, Arr[i].width, Arr[i].height);
//            if(i < Arr.length -1){
//                pdf.addPage();
//            }
//        }
//        pdf.save("test.pdf")
//    }
//
//}





    //页面转canvas再转PDF
    function jsPrintPdf(){
        var filename = '导出的页面名字.pdf';
        var element = $("#pdfPrint");    // 这个dom元素是要导出pdf的div容器
        var w = element.width();    // 获得该容器的宽
        var h = element.height();    // 获得该容器的高
        var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
        var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
        var canvas = document.createElement("canvas");
        var abs = 0;
        var win_i = $(window).width();    // 获得当前可视窗口的宽度（不包含滚动条）
        var win_o = window.innerWidth;    // 获得当前窗口的宽度（包含滚动条）
        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($("#pdfPrint"), {
            useCORS: true,
            dpi: window.devicePixelRatio * 2,
            scale: 2,
            width: w,
            height: h,
            pagesplit: true,
            background: "#ffffff",
            onrendered: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(filename);
        }})
    }


//    function jsPrintPdf() {
//        var filename = '导出的页面名字.pdf';
//        var copyDom = $("#pdfPrint");//要保存的dom
//        var width = copyDom[0].offsetWidth; //dom宽
//        var height = copyDom[0].offsetHeight; //dom高
//        var scale = 2; //放大倍数
//        var opts = {
//            dpi: window.devicePixelRatio * 2,
//            scale: scale,
//            width: width,
//            height: height,
//            background: "#ffffff",
//            useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
//        };
//
//        html2canvas(copyDom[0], opts).then(function(canvas) {
//            var contentWidth = canvas.width;
//        var contentHeight = canvas.height;
//        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
//        var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
//        var imgWidth = pdfWidth;
//        var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
//        var pageData = canvas.toDataURL('image/jpeg', 1.0);
//        var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);
//        pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
//            pdf.save(filename);
//    });
//    }
</script>
</html>

猜你喜欢

转载自blog.csdn.net/myfmyfmyfmyf/article/details/105129930
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022