在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例Box Model → 在线将html转换成pdf文件 示例源码

在线将html转换成pdf文件 示例源码

Box Model

下载此实例
  • 开发语言:CSS
  • 实例大小:0.11M
  • 下载次数:35
  • 浏览次数:806
  • 发布时间:2017-10-20
  • 实例类别:Box Model
  • 发 布 人:crazycode
  • 文件格式:.zip
  • 所需积分:2
 相关标签: pdf 转换 文件 HTML 在线

实例介绍

【实例简介】

【实例截图】

from clipboard

【核心代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HtmlToPdf</title>
    <link rel="stylesheet" href="./css/index.css"/>

    <script type="text/javascript" src="./js/canvg2.js"></script>
    <script type="text/javascript" src="./js/html2canvas-0.4.1.js"></script>
    <script type="text/javascript" src="./js/jspdf.min.js"></script>
    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="container">
    <input id="downloadPdf" type="button" value="Download PDF"/>
</div>
<div id="pdfContainer" class="container">
    <div>点击上面的按钮,蓝色框区域内的内容将会被导出为pdf.</div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
                <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"></feGaussianBlur>
                <feOffset in="blur" dx="4" dy="4" result="offsetBlur"></feOffset>
                <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20"
                                    lighting-color="#bbbbbb" result="specOut">
                    <fePointLight x="-5000" y="-10000" z="20000"></fePointLight>
                </feSpecularLighting>
                <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"></feComposite>
                <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
                             result="litPaint"></feComposite>
                <feMerge>
                    <feMergeNode in="offsetBlur"></feMergeNode>
                    <feMergeNode in="litPaint"></feMergeNode>
                </feMerge>
            </filter>
        </defs>
        <rect x="1" y="1" width="198" height="118" fill="#cccccc"></rect>
        <g filter="url(#MyFilter)">
            <path fill="none" stroke="#D90000" stroke-width="10"
                  d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z"></path>
            <text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
        </g>
    </svg>
</div>

<script type="text/javascript">
    $(function () {
        $("#downloadPdf").click(function () {
            var targetDom = $("#pdfContainer");
            //把需要导出的pdf内容clone一份,这样对它进行转换、微调等操作时才不会影响原来界面
            var copyDom = targetDom.clone();
            //新的div宽高跟原来一样,高度设置成自适应,这样才能完整显示节点中的所有内容(比如说表格滚动条中的内容)
            copyDom.width(targetDom.width()   "px");
            copyDom.height(targetDom.height()   "px");

            $('body').append(copyDom);//ps:这里一定要先把copyDom append到body下,然后再进行后续的glyphicons2canvas处理,不然会导致图标为空

            svg2canvas(copyDom);
            html2canvas(copyDom, {
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var img = new Image();
                    img.src = imgData;
                    //根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.225是因为比例问题
                    img.onload = function () {
                        //此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
                        if (this.width > this.height) {
                            var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
                        } else {
                            var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
                        }
                        doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
                        //根据下载保存成不同的文件名
                        doc.save('pdf_'   new Date().getTime()   '.pdf');
                    };
                    //删除复制出来的div
                    copyDom.remove();
                },
                background: "#fff",
                //这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
                allowTaint: true //避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
            });
        });
    });

    function svg2canvas(targetElem) {
        var svgElem = targetElem.find('svg');
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            //由于现在的IE不支持直接对svg标签node取内容,所以需要在当前标签外面套一层div,通过外层div的innerHTML属性来获取
            var tempNode = document.createElement('div');
            tempNode.appendChild(node);
            var svg = tempNode.innerHTML;
            var canvas = document.createElement('canvas');
            //转换
            canvg(canvas, svg);
            parentNode.appendChild(canvas);
        });
    }

    function glyphicons2canvas(targetElem, fontClassName, fontFamilyName) {
        var iconElems = targetElem.find('.'   fontClassName);
        iconElems.each(function (index, inconNode) {
            var fontSize = $(inconNode).css("font-size");
            var iconColor = $(inconNode).css("color");
            var styleContent = $(inconNode).attr('style');
            //去掉"px"
            fontSize = fontSize.replace("px", "");
            var charCode = getCharCodeByGlyphiconsName(iconName);
            var myCanvas = document.createElement('canvas');
            //把canva宽高各增加2是为了显示图标完整
            myCanvas.width = parseInt(fontSize)   2;
            myCanvas.height = parseInt(fontSize)   2;
            myCanvas.style = styleContent;
            var ctx = myCanvas.getContext('2d');
            //设置绘图内容的颜色
            ctx.fillStyle = iconColor;
            //设置绘图的字体大小以及font-family的名字
            ctx.font = fontSize   'px '   fontFamilyName;
            ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize)   1);
            $(inconNode).replaceWith(myCanvas);
        });
    }
    //根据glyphicons/glyphicon图标的类名获取到对应的char code
    function getCharCodeByGlyphiconsName(iconName) {
        switch (iconName) {
            case("glyphicons-resize-full"):
                return "0xE216";
            case ("glyphicons-chevron-left"):
                return "0xE225";
            default:
                return "";
        }
    }
</script>


</body>
</html>

实例下载地址

在线将html转换成pdf文件 示例源码

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 asdfsunnywind 发表于: 2018-04-25 08:50 15
文件损坏

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有1条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警