<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. Game Engine Architecture 13

    [Game Engine Architecture 13] 1.describe an arbitrary signal x[n] as a linear combination of unit im ...

  2. vuex相关

    作用:对项目里多个组件的共享状态进行集中式管理(读/写) .

  3. echarts - 折线图 - 每秒刷新数据并显示

    function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; var ...

  4. socket小程序写一个客户端，实现给服务端发送hello World字符串，将客户端发送的数据变成大写后返回

    写一个客户端,实现给服务端发送hello World字符串,将客户端发送的数据变成大写后返回 本机id是192.168.xx.xy 服务端 import socket soc = socket.soc ...

  5. zzulioj - 2599: 对称的数字

    题目链接: http://acm.zzuli.edu.cn/problem.php?id=2599 题目描述 小D同学发现了一些数字与其反转数字相加求和得出新数字,新数字再不断重复这个过程,最终可能得 ...

  6. Mybatis集成ehcache

    Mybatis集成ehcache 1.为什么需要缓存 拉高程序的性能 2. 什么样的数据需要缓存 很少被修改或根本不改的数据 业务场景比如:耗时较高的统计分析sql.电话账单查询sql等 3. ehc ...

  7. bzoj [SDOI2014]数表 莫比乌斯反演 BIT

    bzoj [SDOI2014]数表 莫比乌斯反演 BIT 链接 bzoj luogu loj 思路 \[ \sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m}a*[f[ ...

  8. hdu5111 树链剖分，主席树

    hdu5111 链接 hdu 思路 先考虑序列上如何解决. 1 3 2 5 4 1 2 4 5 3 这个序列变成 1 2 3 4 5 1 3 5 5 2 是对答案没有影响的(显然). 然后查询操作\( ...

  9. 洛谷 P2580 【于是他错误的点名开始了】题解

    XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已结束比赛CON900). 题目背景 ...

  10. spark基础知识二

    主要围绕spark的底层核心抽象RDD进行理解.主要包括以下几个方面 RDD弹性分布式数据集的概念 RDD弹性分布式数据集的五大属性 RDD弹性分布式数据集的算子操作分类 RDD弹性分布式数据集的算子 ...