<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. python库包大全(转)

    python 库资源大全 转自: Python 资源大全中文版 环境管理 管理 Python 版本和环境的工具 p:非常简单的交互式 python 版本管理工具.官网 pyenv:简单的 Python ...

  2. 如何使用Activator.CreateInstance创建一个列表<T>，其中T在运行时是未知的？

    参考网址:https://cloud.tencent.com/developer/ask/185965 using System; using System.Collections.Generic; ...

  3. linux修改服务器时区并使用所选时区的时间

    linux 修改服务器时区并使用所选时区的时间(以 ubuntu18.04 修改为美国芝加哥时区为例) 一.修改时区    /usr/bin/tzselect        1.选择地区, 美洲地区: ...

  4. Free Professional Resume Examples and Writing Tips

    https://www.thebalancecareers.com/free-resume-examples-and-writing-tips-2063596 Do you need to write ...

  5. ActiveMQ消息可靠性-事物

    事物偏生产者,签收偏消费者 设置为true,需要手动提交    设置为false,自动提交   使用手动提交的好处就是可以回滚,当整个事物提交时,里面的某条失败了,可以事物回滚,于是保证了数据的一致性 ...

  6. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  7. 4、组件注册-自定义TypeFilter指定过滤规则

    4.组件注册-自定义TypeFilter指定过滤规则 4.1 FilterType.ANNOTATION 按照注解方式 4.2 FilterType.ASSIGNABLE_TYPE 按照给定的类型 @ ...

  8. Hibernate框架学习3

    一对多|多对一 一对多 多对一 级联操作 结论: 简化操作.一定要用,save-update,不建议使用delete. 关系维护 在保存时.两方都会维护外键关系.关系维护两次,冗余了. 多余的维护关系 ...

  9. ESP8266 LUA脚本语言开发: 准备工作-硬件说明

    原理图 实物图 硬件说明 开发板板载说明: 1.主控芯片: ESP8266_12F 1.温湿度传感器DHT11   与连接ESP8266        GPIO4引脚 2.一路继电器         ...

  10. ESA2GJK1DH1K基础篇: 测试APP使用SmartConfig绑定Wi-Fi 设备并控制设备

    前言 实现功能概要 STM32控制WI-Fi模块以AT指令TCP透传方式连接MQTT服务器, 实现MQTT通信控制. 测试准备工作(详细下载步骤请参考 硬件使用说明 ) 一,下载单片机程序 二,安装A ...