最近研究了2天如何把html转为pdf保存的方法，网上找了好多解决方案。总结下来也就是2种
一种是使用js的插件 jspdf 这款插件我试了下，很强大 使用起来也很简单，唯一 一点不好的就是转成pdf有些模糊
另一种方案就是使用iTextSharp wkhtmltopdf Pechkin等工具 这些是最常见的了，本文中使用的是Pechkin 过程中还是踩了下坑
今天给大家分享一下这2种方案的使用方法 当然有些讲解不好的地方 希望多多包涵 本人小白
首先第一种使用js插件 我们需要准备2个文件 jspdf html2canvas 这2个js文件 大家可以去网上找一下 比较多
然后我们在需要用到的地方引用一下这几个js文件
如图：
这个是使用方法，下面注释的2行代码表示如果转换为pdf一页不够就会分成2页
$(function () {
$("#save").click(function () {
html2canvas($("#htmltopdf"), {
onrendered: function (canvas) {
//返回图片dataURL，参数：图片格式和清晰度(0-1);
var imgData = canvas.toDataURL();
//方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
var doc = new jsPDF('p', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸
doc.addImage(imgData, 'PNG', 9, 0, 500, 250);
//doc.addPage();
//doc.addImage(imgData, 'PNG', 9, -900, 650, 750);
doc.save('test.pdf');
}
})
});
})
下面贴出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辅助器调用。
好了 方案就介绍到这，谢谢大家，文中方案如果有什么问题 欢迎大家提出