JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!

Wesley13
• 阅读 399

废话不多说,直接上代码。

1.资源文件或依赖

<script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/html2canvas-0.4.1.js"></script><script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/jspdf.min.js"></script><script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/jquery-2.1.4.min.js"></script>    

2. HTML代码

<div class="container">    <input id="downloadPdf" type="button" value="Download PDF"/></div><div id="pdfContainer" class="container">                      导出范围是ID为pdfContainer的div所在的区域    <div>点击上面的按钮,蓝色框区域内的内容将会被导出为pdf.</div></div>

3. JS代码

<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>以上完美实现你的导出pdf的问题。代码库地址: https://github.com/zhangshaoliang/downLoadPDF
点赞
收藏
评论区
推荐文章
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
Wesley13 Wesley13
11个月前
JS动态加载JS
1、直接document.write <script language="javascript"> document.write("<script src='test.js'><\\/script>"); </script> 2、动态改变已有script的src属性 <script src='' id="s1"></script> <
Wesley13 Wesley13
11个月前
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
Stella981 Stella981
11个月前
Android So动态加载 优雅实现与原理分析
> 背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载. ![](https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png) 点击上方“蓝字”关注我
Wesley13 Wesley13
11个月前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Wesley13 Wesley13
11个月前
GOJS使用
GOJS使用--前端拓扑图 ------------- ### 1.基础版: * 引入go.js <script src="https://my.oschina.net//u/4402671/blog/3234986/js/go.js" type="text/javascript"></script>
Wesley13 Wesley13
11个月前
vs2015 JS+EasyUI+C# Excel导出
前台:{ id: 'print', iconCls: 'icon-print', text: '导出', handler: function () { var filterRules = $('#dg').datagrid('options')
Wesley13 Wesley13
11个月前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为