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

Wesley13 等级 115 0 0

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

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
收藏
评论区

相关推荐

「Vue — 插件」PDF预览vue-pdf
样式如图:1:npm install save vuepdf2:在需要使用的页面中 js<div class"page"{{currentPage}}/{{pageCount}}</div<div class"pdf" <span @click"changePdfPage(0)" class"arrow" :class"{g
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
Cocos Creator3.x中使用AES加密解密
Cocos Creator升级3x版本之后就不再支持js了,直接装包cryptojs会报错,require 函数在ts里面 根本就不能识别,但是我们项目中需要用到js的包来实现AES加密解密,尝试了多种方法终于修成正果 使用方法import CryptoJS from "cryptojs.min.js";const aseKey "12345678"
AES加密解密
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script> <script> function getAesString(data,key,i
JSON 与 JS 对象的关系
很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚。简单来说: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。 如 var obj = {a: 'ni', b: 'hao'}; //这是一个对象,注意键名也是可以使用引号包裹的
JS中正则表达式
### 正则表达式的定义 js中的正则表达式使用RegExp对象表示,两种创建正则表达式对象的方法 #### 直接量定义 将表达式包含在斜杠之间 var pattern = /js/; #### 构造函数定义: 使用RegExp()构造函数定义 var pattern = new RegExp('js');
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
HTML小游戏2
一.“围住神经猫” 新建JS:app.js, js代码 var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Cont
vod_play.html修改播放器页面模板
这两条js不要丢,含在home\_include.html中,否则会无法加载播放器 <script>var SitePath='{maccms:path}',SiteAid='{maccms:siteaid}',SiteTid='{maccms:sitetid}',SiteId='{maccms:siteid}';</script> <sc
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历 =========== 针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等 ========================================== JS数组遍历: ------- 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9,10,20,
JavaScript逆向教程之破解某麦参数加密的思路
正文共:2533 字 10 图 预计阅读时间: 7 分钟 作者:ThreeTails 原 文: http://www.threetails.xyz/2019/05/19/初探js逆向(二) ![](https://oscimg.oschina.net/oscnet/80c2c326-a706-47bc-b2cc-15c11bc80e24.jp
Springboot+ajax前后端传参
记录一下Springboot前后端传参方式 基础环境:   Idea2018.3.2   maven3.6.1   jsp   js,ajax   Springboot 代码:   js: $(document).ready(function() { //添加用户信息,点击事件 $('#su