1.资源

<script type="text/javascript" src="./js/canvg2.js"></script>
<script type="text/javascript" src="./js/html2canvas-0.4.1.js"></script>
<script type="text/javascript" src="./js/jspdf.min.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>

2.主要代码

function changeImg(target) {
$('body').find('canvas').each(function (i, v) {
var imgSrc = v.toDataURL("image/png");
$(v).prop('outerHTML', '<img src="' + imgSrc + '" /> ');
});
var targetDom = $(target);
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom);
svg2canvas(copyDom);
html2canvas(copyDom, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/jpeg');
var img = new Image();
img.src = imgData;
img.onload = function () {
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(getQueryString('name', decodeURIComponent(location.href)) + '.pdf');
};
copyDom.remove();
},
background: "#fff",
allowTaint: true
});
}
function svg2canvas(targetElem) {
var svgElem = targetElem.find('svg');
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var tempNode = document.createElement('div');
tempNode.appendChild(node);
var svg = tempNode.innerHTML;
var canvas = document.createElement('canvas');
canvg(canvas, svg);
parentNode.appendChild(canvas);
});
}

3.参考资源

Javascript 将html转成pdf,下载,支持多页哦(html2canvas 和 jsPDF)

纯js实现html转pdf

指定html转pdf文档的更多相关文章

  1. C# 打印PDF文档的10种方法

    操作PDF文档时,打印是常见的需求之一.针对不同的打印需求,可分多种情况来进行,如设置静默打印.指定打印页码范围和打印纸张大小.双面打印.黑白打印等等.经过测试,下面将对常见的几种PDF打印需求做一些 ...

  2. java实现MsOffice文档向pdf文档转化

    本篇文档实现功能,将word和ppt文档的文件转化成pdf格式的文档 应用到jacob 第一步:下载压缩包 (1)jacob官网下载jacob压缩包 (2)网址:http://sourceforge. ...

  3. Quartz 2D编程指南- PDF文档的创建、显示及转换

    PDF文档存储依赖于分辨率的向量图形.文本和位图,并用于程序的一系列指令中.一个PDF文档可以包含多页的图形和文本.PDF可用于创建跨平台.只读的文档,也可用于绘制依赖于分辨率的图形.         ...

  4. C# 复制PDF页面到另一个PDF文档

    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...

  5. 使用免费组件view pdf 文档

    “Is there any way to view PDF files in a Winforms tool?” 这个是我在技术论坛上发现的一个老外求助的帖子,然后看到别人回复的帖子中建议了一个免费的 ...

  6. PHP 与pdf文档 与条码

    必要的步骤 1.导入require_once "tcpdf/tcpdf.php"; 工具源码在demo中 2.$pdf = new TCPDF("P", &qu ...

  7. 手机打开PDF文档中文英文支持(乱码问题)解决攻略

    电子书的优点很多,随时随地阅读,无论白天黑夜走路坐车都能阅读:想确认一下某句话是不是这本书里的,搜索一下就可以知道:搬家也不用发愁,几万本书带在身上,依然轻松步行.我买了一台平板主要动因就是为了看书, ...

  8. C#生成PDF文档,读取TXT文件内容

    using System.IO;using iTextSharp.text;using iTextSharp.text.pdf; //需要在项目里引用ICSharpCode.SharpZipLib.d ...

  9. PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示解决方法

    问题:PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示! FlexPaper 与 PDF2SWF 结合是解决在线阅读PDF格式文件的问题的,多页的PDF文件转换可以正常显示,只有一页 ...

随机推荐

  1. mysql查杀会话

    root登陆mysql,查看会话(show processlist\G;): mysql> kill

  2. Python 3 利用 Dlib 实现人脸 68个 特征点的标定

    0. 引言 利用 Dlib 官方训练好的模型 “shape_predictor_68_face_landmarks.dat” 进行 68 个点标定: 利用 OpenCv 进行图像化处理,在人脸上画出 ...

  3. CentOS7安装步骤详解

    准备环境 1.虚拟机  VMware Workstation 2.Centos7-64位安装包  ( CentOS-6.7-x86_64-bin-DVD1.iso ) 开始安装   进入安装初始化界面 ...

  4. 国外DNS服务器总结

    国外12个免费的DNS DNS(即Domain Name System,域名系统),是因特网上作为域名和IP地址相互映射的一个分布式数据库,能够让用户更方便的访问互联网,而不用去记住能够被机器直接读取 ...

  5. <select>里动态添加option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  6. 青岛网络赛J-Press the button【暴力】

    Press the Button Time Limit: 1 Second      Memory Limit: 131072 KB BaoBao and DreamGrid are playing ...

  7. gitlab-runner ---CI

    gitlab-runner: https://segmentfault.com/a/1190000007180257 https://mp.weixin.qq.com/s?__biz=MjM5MTA1 ...

  8. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  9. OOP理解

    https://www.cnblogs.com/xiaosongluffy/p/5072501.html OOP是面向对象编程,有几大基础特性.抽象,封装,继承,多态 1:抽象:将世界上的具体事物提取 ...

  10. Spark的Java API例子详解

    package com.hand.study; import scala.Tuple2; import org.apache.spark.SparkConf; import org.apache.sp ...