最近研究了2天如何把html转为pdf保存的方法,网上找了好多解决方案。总结下来也就是2种
一种是使用js的插件 jspdf 这款插件我试了下,很强大 使用起来也很简单,唯一 一点不好的就是转成pdf有些模糊
另一种方案就是使用iTextSharp wkhtmltopdf Pechkin等工具 这些是最常见的了,本文中使用的是Pechkin 过程中还是踩了下坑
今天给大家分享一下这2种方案的使用方法 当然有些讲解不好的地方 希望多多包涵 本人小白
首先第一种使用js插件 我们需要准备2个文件 jspdf html2canvas 这2个js文件 大家可以去网上找一下 比较多
然后我们在需要用到的地方引用一下这几个js文件
如图:
这个是使用方法,下面注释的2行代码表示如果转换为pdf一页不够就会分成2页
1 $(function () { 2 $("#save").click(function () { 3 html2canvas($("#htmltopdf"), { 4 onrendered: function (canvas) { 5 //返回图片dataURL,参数:图片格式和清晰度(0-1); 6 var imgData = canvas.toDataURL(); 7 //方向默认竖直,尺寸ponits,格式a4[595.28,841.89] 8 var doc = new jsPDF('p', 'pt', 'a4'); 9 //addImage后两个参数控制添加图片的尺寸 10 doc.addImage(imgData, 'PNG', 9, 0, 500, 250); 11 //doc.addPage(); 12 //doc.addImage(imgData, 'PNG', 9, -900, 650, 750); 13 doc.save('test.pdf'); 14 } 15 }) 16 }); 17 })
下面贴出html代码:
<div id="htmltopdf"> <h1>html转pdf</h1> <p> 关键代码解析:<br /> html2canvas 是将当前页面转换成图片;<br /> $('#appmsg') 是要转换为图片的页面范围;<br /> height:5000,这个高度要根据页面的大小灵活调整; var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;<br /> doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,<br />后面四个参数可根据实际效果灵活调整;<br /> doc.addPage(); 一页pdf显示不完整的时候,新增一页; </p> <img src="QQ截图20170809103511.png" /> </div> <button id="save">下载</button>
下面给大家介绍第二种方法Pechkin
打开vs 管理NuGet程序包 如图所示 在项目中安装
安装完成后会在根目录出现5个dll程序集
文中创建的是mvc项目
[HttpPost] public ActionResult DownloadPdf() { GlobalConfig config = new GlobalConfig(); SimplePechkin pechkin = new SimplePechkin(config); ObjectConfig objectConfig = new ObjectConfig(); objectConfig.SetPrintBackground(true) .SetLoadImages(true) .SetAffectPageCounts(true) .SetPageUri("http://localhost:7858/Home/Index"); byte[] bytePDF = pechkin.Convert(objectConfig); return File(bytePDF, "application/pdf","test.pdf"); }
SetPageUri里面的那个链接替换成需要转pdf文档的网址链接就行了。lz小白一个 在调用这个方法的时候踩了一个坑 用ajax发起请求结果死活没反应
正确方法应该酱紫的
@using(Html.BeginForm("DownloadPdf","Home",FormMethod.Post)) { <input type="submit" value="submit" /> }
在视图当中使用html辅助器调用。
好了 方案就介绍到这,谢谢大家,文中方案如果有什么问题 欢迎大家提出