标签:分页 mode canvas com page director buffer 返回 code
最近有个需求,需要将html转换成pdf并支持下载
1.需要两个js库 下载 提取码: vab7
<script type="text/javascript" src="~/lib/html2canvas.js"></script> <script type="text/javascript" src="~/lib/jsPdf.debug.js"></script>
2.下面是js
<script type="text/javascript"> function savePDF() { html2canvas($("#pdf"), { allowTaint: true,//允许跨域 height: document.getElementById("pdf").scrollHeight,//为了使竖向滚动条的内容全部展示,这里必须指定 width: document.getElementById("pdf").scrollWidth,//为了使横向滚动条的内容全部展示,这里必须指定 background: "#FFFFFF",//设置背景色为白色,一定要设置你想要的颜色,不然默认是黑色的 onrendered: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; console.log(canvas); //返回图片URL,参数:图片格式和清晰度(0-1) var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0); //方向默认竖直,尺寸ponits,格式a4【595.28,841.89] var pdf = new jsPDF(‘‘, ‘pt‘, ‘a4‘); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, ‘JPEG‘, 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, ‘JPEG‘, 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } }pdf.save(‘content.pdf‘); //当前页面直接下载pdf
//如果你是直接下载pdf以上就能达到你的要求,如果你需要后台保存到指定文件夹下,继续进行下边内容 var datauri = pdf.output(‘dataurlstring‘); console.log(datauri); //去掉前面的字符串后,就是文件的加密字符串 var base64 = datauri.substring(28); console.log(base64); //传到后台 流 中保存 $.ajax({ url: "/OnlineExamination/SavePDF", type: "post", data: { str: base64,path:‘路径‘ }, success: function (json) { } }) } }) } savePDF(); </script>
3.下附后台保存代码
[HttpPost] public void SavePDF(string str,string path) {if (!Directory.Exists(path)) Directory.CreateDirectory(path); Base64StringToFile(str, path); } public void Base64StringToFile(string strbase64, string strurl) { try { strbase64 = strbase64.Replace(‘ ‘, ‘+‘); MemoryStream stream = new MemoryStream(Convert.FromBase64String(strbase64)); FileStream fs = new FileStream(strurl, FileMode.OpenOrCreate, FileAccess.Write); byte[] b = stream.ToArray(); //byte[] b = stream.GetBuffer(); fs.Write(b, 0, b.Length); fs.Close(); } catch (Exception e) { } }
标签:分页 mode canvas com page director buffer 返回 code
原文地址:https://www.cnblogs.com/LiChen19951127/p/10919002.html