如何在PDF上打印带有样式和CSS的完整HTML页面内容？ [英] How to print a complete HTML page contents with style and CSS on PDF?
本文介绍了如何在PDF上打印带有样式和CSS的完整HTML页面内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，
这里我需要实现一个功能，我需要在PDF文件中编写HTML页面。
示例：
Hello,
Here I need to implement a functionality in which I need to writr a HTML page as it is in PDF file.
Example:
But my requirement is different. Its not simple to create HTML in PDF. I need a functionality like write this current open page on PDF as it looks like.
提前谢谢
我尝试过：
我正在尝试
Thanks in advance
What I have tried:
I am trying
iTextSharp
推荐答案
你好，最后我得到了一个使用JQuery的解决方案。
Hello, finally I got a solution using JQuery.
<!-- Scripts -->
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />
<script>
(function () {
// Define variables
var
form =
（'＃dvMain'），
cache_width = form.width（），
cache_height = form.height（），
a4 = [595.28,841.89]; //适用于a5尺寸的纸张宽度和高度
if （'@ Model.Mode'==PDF）{
//滚动屏幕
('#dvMain'), cache_width = form.width(), cache_height = form.height(), a4 = [595.28, 841.89]; // for a5 size paper width and height if ('@Model.Mode' == "PDF") { // Scroll screen
（'body'）。scrollTop（0）;
//调用函数createPDF
createPDF（）;
}
//创建pdf
函数createPDF（）{$ b $ b if（cache_height> 600）
cache_height = 600;
//调用创建画布函数
getCanvas（）。then（function（canvas）{
var
img = canvas.toDataURL（image / png ），
doc = new jsPDF（{
unit：'px'，
格式：'a4
}）;
doc.addImage（img，'JPEG'，10,10,420，cache_height）;
doc.save（'techumber-html-to-pdf.pdf'）;
form.width（cache_width）;
}）;
}
//创建画布对象
函数getCanvas（）{
form.width（（a4 [0] * 1.33333））。css （'max-width'，'none'）;
返回html2canvas（表单，{
imageTimeout：3000，
removeContainer：true
}）;
}
}（））;
< / script>
('body').scrollTop(0); // Call function createPDF createPDF(); } //create pdf function createPDF() { if (cache_height > 600) cache_height = 600; // Call create canvas function getCanvas().then(function (canvas) { var img = canvas.toDataURL("image/png"), doc = new jsPDF({ unit: 'px', format: 'a4' }); doc.addImage(img, 'JPEG', 10, 10, 420, cache_height); doc.save('techumber-html-to-pdf.pdf'); form.width(cache_width); }); } // create canvas object function getCanvas() { form.width((a4[0] * 1.33333)).css('max-width', 'none'); return html2canvas(form, { imageTimeout: 3000, removeContainer: true }); } }()); </script>
HTML：
HTML:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Reference PDF
</title>
</head>
<body>
<div class="ui segment">
<div id="dvMain" name="dvMain">
<div class="clr"></div>
<div class="col-md-12">
<label>Student Name:</label> <label id="lblSName" name="lblSName"> @Model.Student</label> <br />
<label>Date of Brith:</label> @dob <br /><br />
<label>Course applied for:</label> @Model.ApplicationCourses
</div>
<div class="col-md-12">
<br />
<label>Referee Name:</label> @Model.Referee <br />
<label>Position:</label> @Model.RefereesJobTitle<br />
<label>Organisation:</label> @Model.InstitutionName
</div>
<div class="clr"></div>
@if (string.IsNullOrEmpty(Model.ReferenceCompletedDate))
{
<div class="col-md-12">
<label>Reference Status:</label> Reference not completed
</div>
}
else
{
<div class="col-md-12">
<label>Reference Status:</label> Completed
</div>
<br />
<div class="col-md-12">
@Html.Raw(Model.HTMLContent)
</div>
}
</div>
</div>
</body>
</html>
这篇关于如何在PDF上打印带有样式和CSS的完整HTML页面内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
