在线将html文件转pdf,在线将html转换成pdf文件 示例源码
【实例简介】
【实例截图】
【核心代码】
HtmlToPdf
lighting-color="#bbbbbb" result="specOut">
result="litPaint">
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z">
SVG
$(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 "";
}
}
在线将html文件转pdf,在线将html转换成pdf文件 示例源码相关推荐
- html5把word转为pDF,在线word转pdf 如何将word转换成pdf
日常办公常接触到pdf.word文件,在打印或发送文件时也有需要word转成稳定性较好的pdf,那 一起来看看是如何将word转换成pdf的吧.打开安装好的word to pdf软件,如下图,界面很简 ...
- nodejs+html转换pdf,Nodejs 中将html转换成pdf文件
Nodejs 中将html转换成pdf文件,Nodejs Convert html into pdf 1. 下载phantomjs.exe,将该文件放在根目录 2. 编写pdf.js文件(在githu ...
- excel中html批量转化为pdf文件,如何将大量的Excel转换成PDF?
大家都知道Excel表,最怕别人修改了,尤其是数据.一旦修改,可能就会有麻烦.那如何是好呢?有一个最简单的办法就是把Excel转换成PDF文件,这样别人只能阅读不能编辑,就不用担心被修改了,哈哈~下面 ...
- docx 转换成html转pdf,python3将docx转换成pdf,html文件,pdf转doc文件
直接上代码 #-*- encoding:utf-8 -*- """author:lgh 简单的doc转pdf,html,pdf转doc脚本 依赖库pdfminer3k,p ...
- 如何把html转换pdf,怎么把html转换成pdf
1.怎么将html格式文件转成pdf 1这个方法是我认为最简单.高效的,只要安装了360浏览器.火狐浏览器或谷歌浏览器就可以轻松实现.下面笔者以360浏览器为例,我们只要在浏览器的右上角点击" ...
- Word怎么转换成pdf?Word批量转换成pdf教程
Word文档是我们生活中常见且经常使用的文本格式,在使用Word文档时,多数情况下会涉及到转换的问题,很多人希望将Word转换成PDF文件使用.但对于Word怎么转换成PDF却是众说纷纭的,几乎是每一 ...
- php html转化为pdf,PHP将html转换成PDF文件
昨天在群里看见一位小朋友在求助,他的问题是如果将html页面中的部分html代码转换成PDF文件,我昨天尝试做了一下, 今天给大家分享一下教程和代码. 首先我们需要借助一个PHP的类库及拓展来完成这个 ...
- c# html文件转换word,C#实现word转换成html文档 源码
[实例简介]C#实现word转换成html文档 [实例截图] [核心代码] using System; using System.Collections.Generic; using System.C ...
- 保存DWG格式文件并在CAD中编辑转换成PDF文件
当我们使用Proe等建模软件时,常常需要绘制装配图,我推荐在proe中成图,而标题栏和边框装订线到CAD中绘制,这样事半功倍. 具体操作如下: 将文件另存为CAD可以打开的dwg格式 如图:在CAD中 ...
- python编程锦囊pdf百度云_python编程锦囊 相关实例(示例源码)下载 - 好例子网
开发语言:Python | 大小:42.01M | 发布时间:2020-08-05 | 立即下载 开发语言:Python | 大小:41.83M | 发布时间:2020-11-11 | 立即下载 开发 ...
最新文章
- Dokku和Docker的完美配合
- 关于Apache不能解析html内容
- v380智能快配连接不上怎么办_Win7系统电脑设置连接远程桌面的操作方法
- Android笔记 theme主题
- git统计当前项目代码行数
- JS的forEach和map方法的区别
- 软工网络15个人作业5--软件工程总结
- 开发日志:按照每月每天,每年每月,每月每周汇总数据
- PSPNet :语义分割
- 如何解决dubbo配置文件中Multiple annotations found at this line问题
- 如何免费下载知网文献_知网文献下载工具_知网下载器Cnkidownloader
- 《你和你的研究》全文
- 思科路由器配置NAT地址转换
- Phaser3之 load
- 无耻,无知的韩国人!
- vs使用html写出分层次字,Javascript 升阶 10-2 样版字面额方法:VSCode 配搭 Emmet 编写 HTML 构造...
- 超低功耗研发-STM32L151C8T6芯片(三)RTC自动唤醒机制
- 因果AI如何发现因果
- Hadoop(三)读写流程
- 【tio-websocket】3、tio-websocket-server实现任何地方都能对用户发送消息