将HTML转化为PDF格式

参考文档https://github.com/vilppu/OpenHtmlToPdf
在项目中引用，这里使用了.NET Framework 4.5

在页面中把要转化的html代码传到控制器

var html = document.documentElement.outerHTML;

 

获取页面输出的html源码
这里的引用文件会全部失效，包括bootstrap、jquery
需要写内部样式，并且脚本代码运行完毕后再运行转化的请求

function GetPdf() {
var html = document.documentElement.outerHTML;
$.ajax({
url: "/Home/GetPdf",
type: "Post",
dataType: "json",
data: {
html: html
},
success: function(data) {
//alert(data);
}
})
}

 

也可以通过这种方式直接获取html源码

string html = string.Empty;
WebClient wc;
try {
wc = new WebClient();
wc.Encoding = Encoding.UTF8;
string requestUrl = "https://localhost:44353/Home/Page_PDF";
html = wc.DownloadString(requestUrl);
} catch(Exception) {
throw;
}

 

 

完整的控制器方法

string html = string.Empty;
WebClient wc;
try {
wc = new WebClient();
wc.Encoding = Encoding.UTF8;
string requestUrl = "https://localhost:44353/Home/Page_PDF";
html = wc.DownloadString(requestUrl);
} catch(Exception) {
throw;
}

 

 

如果转化的页面中有Echart输出？

可以将原来图表的位置空出来给一个Img标签，通过以下方法将Echart转化为图片放到Img里

var picInfo = barChart.getConnectedDataURL();
$(".Re_barChart").attr("src", picInfo);

 

代替的Img标签就用原本图表容器的样式
.Re_barChart { width: 100%; height: 500px; margin: 20px 0px; display: block; }
原本的图表容器可以隐藏
.barChart { width: 50%; height: 500px; visibility: hidden; position: absolute; }

水印的方案
普通图片的路径转换成PDF后不能读取，只能是base64格式

页面中有一个Img：watermark

<img id="watermark" src="~/images/watermark.png" style="display:none;" />

 

水印的样式

.Canves { position: absolute; top: 0; left: 0;
width: 100%; height: 1600px; z-index: 1000;
pointer-events: none; background-repeat: no-repeat;
background-position: center; background-size: 80%; }

 

获取body的高度，每隔一定距离放一个div作水印容器
再获取watermark的src把它转换为base64格式

var height = $("body").height();
for (let i = 0; i < height / 1600; i++) {
$("body").append("<div class=\"Canves\" style=\"top: " + 1600 * i + "px\"></div>");
}
var image = document.getElementById("watermark");
var base64 = getBase64Image(image);
$(".Canves").css({
"background-image": "url(" + base64 + ")"
});

 

获取一个Img的图片里的src(Base64)

function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}