实现html页面转pdf
2024-10-19 06:25:04
实现方式比较简单,使用js代码实现的。
需要引入的js:
1、jQuery.js;
2、html2canvas.js(实现方式是先将Html页面转换成image图片然后在转换为pdf,所以转换之后会有一点不清晰【个人认为影响不大】);
2、FileSaver.js(下面的jspdf.js中的“savaAS”函数是基于FileSaver.js的);
3、jspdf.js(jspdf.js的支持还是挺多的,因为我写的这个页面没有那些相对复杂的标签【svg…】。所以本次只引入了插件包中的jspdf.js、addimage.js这两个js文件);
5、addimage.js;
上代码:
$("#turnToPdfButton").click(function(){
html2canvas($("#mainPdfHtml"), { //选择你要导出的html区域
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');
}
},
background: "#fff",
//这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
allowTaint: true //避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
});
});
资源下载地址:
html2canvas.js >>> https://github.com/niklasvh/html2canvas/releases
FileSaver.js >>> https://github.com/eligrey/FileSaver.js/
jspdf.js >>> https://github.com/MrRio/jsPDF
最新文章
- 创建cocos项目并打包
- MariaDB 多主一从 搭建测试
- 来吧!带你玩转 Excel VBA
- 理解ip和端口
- Node.js简介
- 动态页面的登陆——装饰器应用<;代码>;
- linux 查看僵尸进程
- MongoDB(三)mongoDB下载和安装
- php处理金额显示的一些笔记
- 使用VS2013编译webkit
- ”在活动中穿梭”已经重做为“Intent的使用”
- Latex: 插入数学公式
- EntityFramework6之原生SQL
- CSS3_线性渐变_径向渐变----背景
- Hadoop学习笔记(六):hive使用
- redis make编译失败的原因
- AOJ 0005 GCD and LCM
- 【转】Git命令大全(非常齐全)
- LA 3135 阿格斯(优先队列)
- application/x-www-form-urlencode 和 multiple/form-data
热门文章
- NOIP模拟测试24「star way to hevaen&#183;lost my music」
- 将Winform和wpf的界面转换为CPF代码用来实现跨平台
- jwt-在asp.net core中的使用jwt
- kubernetes之副本控制器(RC/RS)
- 8.QSharedPointer
- Jenkins CI&;CD 自动化发布项目实战(上篇)
- 9.11、mysql增量备份和增量恢复介绍
- 19、oracle的启动和关闭过程
- CentOS-搭建MinIO集群
- XCTF easyGo