js实现html页面转为pdf下载

这个资料是普通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