<head>
    @*需要引用的js库*@

    <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>

</head>

<body>

    <div id="pdfDom" class="right-aside">

        1232132131sd

    </div>

    <input type="button" value="点击" onclick="makeMpdf('建设工程施工安全监督抽查记录', 'pdfDom')" />

    <script type="text/javascript">//将html页面导出.pdf格式文件(适用于jQuery、vue库)  -- xzz 2018/04/24

        function makeMpdf(pdfName,elementId) {

            if (confirm("您确认下载该PDF文件吗?")) {

                //var target = document.getElementsByClassName("right-aside")[0];

                var target = document.getElementById(elementId);

                target.style.background = "#FFFFFF";

                if (pdfName == '' || pdfName == undefined) pdfName = "content";

                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 = ;

                        //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', , , imgWidth, imgHeight);

                        } else {

                            while (leftHeight > ) {

                                pdf.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight)

                                leftHeight -= pageHeight;

                                position -= 841.89;

                                //避免添加空白页

                                if (leftHeight > ) {

                                    pdf.addPage();

                                }

                            }

                        }

                        pdf.save(pdfName + ".pdf");

                    }

                })

            }

        }

    </script>

</body>

将html中的内容生成PDF并且下载的更多相关文章

  1. （DT系列五）Linux kernel 是怎么将 devicetree中的内容生成plateform_device

    Linux kernel 是怎么将 devicetree中的内容生成plateform_device 1,实现场景(以Versatile Express V2M为例说明其过程)以arch/arm/ma ...

  2. 【转】（DT系列五）Linux kernel 是怎么将 devicetree中的内容生成plateform_device

    原文网址:http://www.cnblogs.com/biglucky/p/4057495.html Linux kernel 是怎么将 devicetree中的内容生成plateform_devi ...

  3. （DT系列五）Linux kernel 是怎么将 devicetree中的内容生成plateform_device【转】

    转自:https://blog.csdn.net/lichengtongxiazai/article/details/38942033 Linux kernel 是怎么将 devicetree中的内容 ...

  4. 在Java代码中使用iTextPDF生成PDF

    1. 生成PDF 载入字体 static { FontFactory.register("/fonts/msyh.ttf"); FontFactory.register(" ...

  5. 在C#.NET中，如何生成PDF文件？主要有以下几个途径

    1．使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...

  6. Javascript 将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...

  7. js将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...

  8. Java 使用itext生成pdf以及下载

    使用方法: 1.需要两个jar包: iText-5.0.6.jar    //必须使用该版本,否则缺少相关的方法 TextAsian.jar //是为了文档中正常显示中文所必须引用的包 TextAsi ...

  9. Vue 生成PDF并下载

    实现原理 该功能原理是将页面转化伟canvas在把canvas转化为base64数据 最后将数据通过pdf.js生成下载,故需要和html2canvas一起使用 友情提醒这个pdf下载不能在app里直 ...

随机推荐

  1. MySQL的select详细介绍

    MySQL 查询数据 MySQL 数据库使用SQL SELECT语句来查询数据. 你可以通过 mysql> 命令提示窗口中在数据库中查询数据 语法 以下为在MySQL数据库中查询数据通用的 SE ...

  2. Linux shell awk逻辑控制语句

    awk逻辑控制语句 1,if...else 格式: if(条件){语句:语句} else {语句1:语句2} 如果statement只有一条语句,{}可以不写 以冒号为分隔符,判断第一个字段,如果为r ...

  3. 【JavaScript】内部与外部引入方式

    1.内部引入方式: script的type属性默认为"text/javascript",可以不写 <script type="text/javascript&quo ...

  4. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  5. django的form 登录组件

    1. 了解form 组件的原理 1.建立好form组件 class>>> 2.了解需要先is_valid() 判断是否可以取值 成功 form.cleaned_data 查看成功认证 ...

  6. 201871010123-吴丽丽《面向对象程序设计（Java）》第四周学习总结

    201871010123-吴丽丽<面向对象程序设计(Java)>第四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  7. LCD12864

    /* LCD Arduino PIN1 = GND PIN2 = 5V RS(CS) = 8; RW(SID)= 9; EN(CLK) = 3; PIN15 PSB = GND; */ #includ ...

  8. LeetCode 825. Friends Of Appropriate Ages

    原题链接在这里:https://leetcode.com/problems/friends-of-appropriate-ages/ 题目: Some people will make friend ...

  9. Pandas | 27 注意事项&窍门

    警告和疑难意味着一个看不见的问题.在使用Pandas过程中,需要特别注意的地方. 与Pandas一起使用If/Truth语句 当尝试将某些东西转换成布尔值时,Pandas遵循了一个错误的惯例. 这种情 ...

  10. go.rice 强大灵活的golang 静态资源嵌入包

    以前简单介绍过packr ,statik 等静态资源嵌入工具包的使用,go.rich 是一个与packr 类似的静态资源嵌入包,使用简单 功能强大 项目结构 golang mod   go mod i ...