jsPDF,生成pdf文件的助手

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33847794/article/details/77941075

jsPDF是一个强大的基于HTML5的PDF生成工具,许多公司需要用它来生成pdf报表。

我也是昨天才了解到它,所以我对于jspdf也是一知半解,在这里我归纳两种我觉得比较实用的生成方法。

链接地址http://mrrio.github.io/

首先,你必须得拥有这个插件


这是练习这个功能所需要的js文件,但是我所归纳的两种只需要以下三种


如果有找不到下载地址的,可以加我百度云我发给你==>国服第一莫节操

第一种:HTML

function exportPdfHtml(){
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#bestfizz').get(0), 15, 15, {
'width': 170, 
'elementHandlers': specialElementHandlers
});
document.getElementById("iframe123").src = doc.output('datauristring');
}

顾名思义就是直接将HTML页面导出成PDF文件,上述代码的功能为 将一个标签id="bestfizz"的内容导出成PDF

最后一行代码为在当前页面的iframe上将其显示出来,如果你想直接下载的话,使用doc.save();

这种方法虽然能直接将HTML页面内容导出成PDF,但会丢失其原有样式,比如你的表格table,你的css,不过网上已经有方法弥补,在这我就不细写,大家找度娘。


第二种:图片

function exportPdfImage(){
        html2canvas($('#bestfizz'), {  
        height:5000,  
        onrendered: function(canvas) {           
            var imgData = canvas.toDataURL('images');  
            var doc = new jsPDF('p', 'px','a3');  
            //数字属性为位置拉伸
            doc.addImage(imgData, 'PNG', 10, 0,0,0);  
            doc.save();
        }  
    });  
}

这种是将页面转为图片再将其保存为PDF文件,上述代码的功能为将id="bestfizz"范围内的内容转换成图片并下载为PDF

这种方法比较硬性,不够灵活,其优缺点大家也能想到。


以上为个人笔记,都为皮毛,欢迎指错以便共同学习,接下来我也会更加深入理解jsPDF。

展开阅读全文

没有更多推荐了,返回首页