这个资料是普通html的（比较原生老旧，此博客写于2018年），如果你用Vue.js开发的话，推荐用vue下载pdf，网上已经有很多关于vue下载pdf的资料了。
1、简单描述
最近做了一个项目，我也是刚学js才几个多月，对js不是很懂，但是我相信，只要肯学，总会进步的。项目里面要实现把网页的试题下载成pdf，所以我有个同事就实现了这个功能，然后我参考着他写的代码就总结了一下。网页渲染的过程中因服务器性能和图片的数量而定，图片太多的话渲染就比较慢了。
2、需要的js
(1)html2canvas.js
(2)jspdf.debug.js
(3)renderPDF.js（这个是一个博主写的：http://blog.csdn.net/pwc1996/article/details/70141383）
(4)paper_download.js(这个是我同事封装的，并且支持图片跨域获取)
3、demo的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成pdf下载</title>
<style type="text/css">
.handle{
margin: 0 auto;
width: 500px;
text-align: center;
margin-bottom: 20px;
}
.download{
cursor: pointer;
padding: 4px 30px;
border: 1px solid #008CCA;
background: #01B9FF;
color: #FFF;
border-radius: 8px;
}
.download:active{
background: #008CCA;
}
.page{
margin: 0 auto;
width: 1000px;
border: solid 1px #000000;
}
.title{
margin: 0 auto;
width: 500px;
text-align: center;
}
.content{
margin: 0 auto;
width: 800px;
text-align: left;
}
.content img{
max-width: 800px;
}
</style>
</head>
<body>
<!--参考 http://blog.csdn.net/pwc1996/article/details/70141383-->
<div class="handle"><span id="download-paper" class="download">下载为pdf</span></div>
<div class="page">
<div class="title"><h4>我的pdf下载测试（支持图片跨域）</h4></div>
<div class="content">
<p>
语言优美：所谓优美，就是指散文的语言清新明丽(也美丽)，生动活泼，富于音乐感，行文如涓涓流水，叮咚有声，如娓娓而谈，情真意切。所谓凝练，是说散文的语言简洁质朴，自然流畅，寥寥数语就可以描绘出生动的形象，勾勒出动人的场景，显示出深远的意境。散文力求写景如在眼前，写情沁人心脾。
<img src="http://subangmedia.oss-cn-qingdao.aliyuncs.com/pdf/1.jpg" />
</p>
<p>
形散神聚：”形散“既指题材广泛、写法多样，又指结构自由、不拘一格；“神聚”既指中心集中，又指有贯穿全文的线索。散文写人写事都只是表面现象，从根本上说写的是情感体验。情感体验就是“不散的神”，而人与事则是“散”的可有可无、可多可少的“形”。
<img src="http://subangmedia.oss-cn-qingdao.aliyuncs.com/pdf/2.jpg" />
</p>
<p>
散文素有“美文”之称，它除了有精神的见解、优美的意境外，还有清新隽永、质朴无华的文采。经常读一些好的散文，不仅可以丰富知识、开阔眼界，培养高尚的思想情操，还可以从中学习选材立意、谋篇布局和遣词造句的技巧，提高自己的语言表达能力。
<img src="http://subangmedia.oss-cn-qingdao.aliyuncs.com/pdf/3.jpg" />
</p>
<p>
至于“形”的含义，《乐记》里有“在天成象，在地成形”的话。钱钟书先生释为“‘形’者，完成之定状”。钱先生还引述亚里士多德论“自然”有五层含义。其四，是“相形之下，尚未成形之原料”，也就是“有质而无形”的状态；其五，是“止境宿归之形”。这种由“原质”，“原料”而“成形”的说法用之于文章写作，也如钱先生所阐述的，“春来花鸟，具‘形’之天然物色也，而性癖耽吟者反目为‘诗料’”。指明做为“诗料”的“形”，即包括着“题材”的内。“吟安佳句，具‘形’之词章也”。指明做为诗文的“形”即指“词章”，包括语言、结构等。我在上文所论“形”的概念，也具有同这里所引说法的一致性。
<img src="http://subangmedia.oss-cn-qingdao.aliyuncs.com/pdf/4.jpg" />
</p>
</div>
</div>
<script src="../tools/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="../tools/pdf_download/html2canvas.js" type="text/javascript" charset="utf-8"></script>
<script src="../tools/pdf_download/jspdf.debug.js" type="text/javascript" charset="utf-8"></script>
<script src="../tools/pdf_download/renderPDF.js" type="text/javascript" charset="utf-8"></script>
<script src="../tools/pdf_download/paper_download.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var imgArray = $('.page')[0].getElementsByTagName('img');
var down = new downLoad(imgArray);
down.init(document.getElementById('download-paper'),$('.page')[0],'pdf文件名称','a4');
</script>
</body>
</html>4、demo在线查看地址
https://www.sqbang.cc/demo/html2pdf/index.html
阿里的学生机过期了，文章尾部可以下载
下载方式：在demo地址里按F12，切换到开发者工具的“source”选项卡，找到js这个目录，然后右键选择“sava as..”即可下载对应的js
5、参考
http://blog.csdn.net/pwc1996/article/details/70141383
6、demo资源下载
https://download.csdn.net/download/SQ_Bang/12705581
严重怀疑系统自动设置下载所需C币（广告一大堆，还莫名其妙设置了东西），明白编辑过设置为0个C币的，过一段时间回来看又变成所需50个C币
链接: https://pan.baidu.com/s/1rO0I8uKxtMbjOea1Vs7QWQ 提取码: cwrg
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
