js实现将网页下载为pdf

最新推荐文章于 2024-04-28 14:41:06 发布

guoyangyang@666

最新推荐文章于 2024-04-28 14:41:06 发布

阅读量4.8k

点赞数 3

分类专栏：前端笔记 JavaScript 文章标签： js实现将网页下载为pdf pdf 网页转pdf js转pdf js网页pdf

本文链接：https://blog.csdn.net/guoyangyang123456/article/details/101446385

版权

前端笔记同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

前端有时会有实现将局部网页转成pdf并且下载到本地的需求，以下实现过程仅限简单的操作：

1、引入jspdf相关的插件

<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

2、在html中给要转成pdf的部分添加id（本例的id是pdf-wrapper）

<div style="padding: 30px">
        <div>顶部标题（不会被放入pdf中）</div>
        <div id="pdf-wrapper" style="padding: 10px;margin: auto">
            <header>公告</header>
            <div class="content">
                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场。请自己携带身份证、草稿纸、笔、笔记本、自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            </div>
            <div class="content">
                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场
            </div>
            <div class="content">
                自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            </div>
        </div>

        <button onclick="jsPdfDownload()">下载pdf</button>
    </div>

3、添加下载方法：

function jsPdfDownload(){
            let pdfName = "测试";
            let id = "pdf-wrapper";
            var target = document.getElementById(id);
            target.style.background = "#FFFFFF";
            if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();

            html2canvas(target, {
                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 = 555.28;//595.28//左右边距20
                    var imgHeight = 552.28/contentWidth * contentHeight;//左右边距20

                    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', 20, 0, imgWidth, imgHeight );//左右边距20
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)//左右边距20
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save(pdfName+".pdf");
                }
            })
        }

4、网页效果：

5、pdf效果：

6、源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.js"></script>
    <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
            font-size: 18px;
            text-align: center
        }
        .content{
            text-align: left;
            text-indent: 30px;
            line-height: 30px;
            margin-top: 20px
        }
    </style>
</head>
<body>
    <div style="padding: 30px">
        <div>顶部标题（不会被放入pdf中）</div>
        <div id="pdf-wrapper" style="padding: 10px;margin: auto">
            <header>公告</header>
            <div class="content">
                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场。请自己携带身份证、草稿纸、笔、笔记本、自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            </div>
            <div class="content">
                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场
            </div>
            <div class="content">
                自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            </div>
            <img style="width: 200px;margin-top: 20px" src="./js/images/Chrysanthemum.jpg">
        </div>

        <button onclick="jsPdfDownload()">下载pdf</button>
    </div>


</body>
    <script>
        function jsPdfDownload(){
            let pdfName = "测试";
            let id = "pdf-wrapper";
            var target = document.getElementById(id);
            target.style.background = "#FFFFFF";
            if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();

            html2canvas(target, {
                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 = 555.28;//595.28//左右边距20
                    var imgHeight = 552.28/contentWidth * contentHeight;//左右边距20

                    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', 20, 0, imgWidth, imgHeight );//左右边距20
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)//左右边距20
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save(pdfName+".pdf");
                }
            })
        }
    </script>
</html>

guoyangyang@666

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
js实现将网页下载为pdf

前端有时会有实现将局部网页转成pdf并且下载到本地的需求，以下实现过程仅限简单的操作：1、引入jspdf相关的插件<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script><script src="https://cdnjs.cloudflare.com/ajax...
复制链接

扫一扫