<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. Linux shell 函数应用示例01

    函数Function的使用 定义函数 (1) 函数名称() {     ...     ... } (2) function 函数名称{     ...     ... } 调用函数         ...

  2. HDU 1240 Asteroids! 题解

    Asteroids! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. PCA 在手写数字数据集上的应用

    在 skilearn 的手写数据集中,每个数据点都是 0 到 9 之间手写数字的一张 8*8 灰度图像.用 PCA 将其降维到二维,并可视化数据点,如下: 1.digits 数据演示: from sk ...

  4. 洛谷P2365 任务安排（斜率优化dp）

    传送门 思路: 最朴素的dp式子很好考虑:设\(dp(i,j)\)表示前\(i\)个任务,共\(j\)批的最小代价. 那么转移方程就有: \[ dp(i,j)=min\{dp(k,j-1)+(sumT ...

  5. 微信小程序中的事件

    事件 说明 bindtap bindload 当图片载入完毕时触发,event.detail = {height, width} bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒 ...

  6. Elasticsearch 报错：Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_field_name`] in order to load fielddata in memory by uninverting the inverted index.

    Elasticsearch 报错: Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_fi ...

  7. 爬虫-lxml用法

    安装 pip install lxml 用法 # coding=utf-8 from lxml import etree text = ''' <div> <ul> <l ...

  8. PCM存储格式 Intel 和 Motorola

    https://blog.csdn.net/cxz_yzxkj/article/details/84496614

  9. celery工作原理介绍

    在学习Celery之前,我先简单的去了解了一下什么是生产者消费者模式. 生产者消费者模式 在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是 ...

  10. Kaggle实战——点击率预估

    https://blog.csdn.net/chengcheng1394/article/details/78940565 原创文章,转载请注明出处: http://blog.csdn.net/che ...