<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. Springboot环境搭建_第一个例子

    首先创建一个maven项目 maven项目创建完成之后,找到pom.xml配置节点.需要springboot-starter-web ,springboot-starter-test,springbo ...

  2. Python 模拟伯努利试验和二项分布

    1.模拟 27 次投掷硬币的伯努利试验 代码: from scipy import stats import numpy as np p = 0.5 # 生成冻结分布函数 bernoulliDist ...

  3. Checkout 显示 URL /../../.. 不存在

    Checkout 显示 URL /../../.. 不存在 Checkout 显示 URL /../../.. 不存在 如果库的路径是 svn库的路径为:/usr/local/svn/test/ 启动 ...

  4. USACO Roadblock

    洛谷 P2176 [USACO14FEB]路障Roadblock 洛谷传送门 JDOJ 2406: USACO 2014 Feb Silver 2.Roadblock JDOJ传送门1 JDOJ 24 ...

  5. Python进阶-III 函数装饰器（Wrapper）

    1.引入场景: 检查代码的运行时间 import time def func(): start = time.time() time.sleep(0.12) print('看看我运行了多长时间!') ...

  6. Pandas | 16 聚合

    当有了滚动,扩展和ewm对象创建了以后,就有几种方法可以对数据执行聚合. DataFrame应用聚合 可以通过向整个DataFrame传递一个函数来进行聚合,或者通过标准的获取项目方法来选择一个列. ...

  7. DIV 始终位于文档底部

    DIV 始终位于文档底部 设置body为绝对定位,最小显示高度为:100%,宽度为:100%: 设置底部显示块为绝对定位,bottom: 0,是body元素的最后一个直接子元素: 设置底部块元素同级元 ...

  8. 未能加载文件或程序集“***”或它的某一个依赖项，拒绝访问 <解决方法>

    报错信息如下: 注:为了部分隐私安全需要,已将有问题文件名替换为filename,系统win2008R2,Microsoft .NET Framework 版本:4.0.30319; ASP.NET ...

  9. ROS+gre over ipv6，在ipv6的基础上建立GRE隧道

    感谢群众大神 @镜花水月全程技术支持.感谢! 环境: 1.阿里云华北5,申请ipv6测试,申请ECS带ipv6公网ip 2.为了便于测试便捷,在vultr创建2.5美元的vps,带ipv6 对了,测试 ...

  10. otl odbc小计

    1. 使用odbc的时候,要注意数据库的编码与odbc配置的编码一致,不然有乱码.所以建议,表中字符编码,数据库的编码,odbc等connector的编码都是utf8,避免乱码问题 2. 安装odbc ...