我想知道是否有可能我们可以使用asp.net从网页加载所有数据.就像我有一个包含表格和饼图的页面.单击按钮后,我将html内容导出为pdf.我已经使用隐藏字段来获取innerHTML要在服务器端进行转换的数据.我正在获取数据,但问题是,当我确实导出到pdf时,看不到饼图.C#代码:
string htmlstring = hiddenTest.Value;
pdfConverter.SavePdfFromHtmlStringToFile(htmlstring, downloadName);
HTML:
function DrawPieChart(series) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, //null,
plotShadow: false,
backgroundColor: {
linearGradient: [50, 0, 100, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(0, 00, 0)']
]
}
},
title: {
text: 'Matched and Unmatched Regions'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Percentage',
data: series
}]
});
}
function htmlbind() {
debugger;
var d = document.getElementById('pdfdiv');
var e = document.getElementById('hiddenTest');
e.value = d.innerHTML;
}
</script>
<%--<My:WebUserControl1 runat="server" ID="WebUserControl1" UserName="a" UserAge="45" UserCountry="Australia" />--%>
<%--<asp:PlaceHolder runat="server" ID="phUserInfoBox" />--%>
</head>
<body bgcolor="#999999">
<form id="form1" runat="server">
<asp:Button ID="button" Text="click" runat="server" OnClick="b1_click" OnClientClick="htmlbind();"/>
<asp:Button ID="button1" Text="click" runat="server" OnClick="b2_click" />
<div>
</div>
<div id="pdfdiv" runat="server">
<div id="container">
</div>
<br />
<br />
<asp:HiddenField ID="hfFilePath" runat="server" OnValueChanged="hfFilePath_ValueChanged" />
<input type="hidden" runat="server" id="hiddenTest" />
javascript:
function htmlbind() {
debugger;
var d = document.getElementById('pdfdiv');
var e = document.getElementById('hiddenTest');
e.value = d.innerHTML;
}
希望提出建议.
src饼图图像的属性是什么?pdfConverter打开了OP Web应用程序的新会话,这可能要求身份验证和/或Session变量才能进行任何浏览器-服务器交互.您可以找到一个纯HTML / Javascript示例,但它也适用于您的情况,并做了一些修改.
http://jsfiddle.net/lucasdamiani/skrhd982/16/(我不会在这里放代码,因为有一堆HTML和Javascript)
您可以从脚本中使用此功能:
saveSvgAsPng(el, options)
el是svg元素,选项可以为null.
在此示例中,我获得了由highcharts生成的图表,并将其转换为纯HTML,从而将SVG图像转换为数据URI.
有关将图形转换为PNG的详细逻辑,请参见http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/.
I want to know is this possible that we can load all of the data from a webpage using asp.net. Like I have a page including a table and a pie-chart. I am exporting my html content to pdf on my button click. I have used hidden field to fetch the innerHTML data to transform on server-side. I am getting the data but the problem is ,when I do export to pdf the piechart is nowhere to be seen.
C# code :
string htmlstring = hiddenTest.Value;
pdfConverter.SavePdfFromHtmlStringToFile(htmlstring, downloadName);
HTML :
function DrawPieChart(series) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, //null,
plotShadow: false,
backgroundColor: {
linearGradient: [50, 0, 100, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(0, 00, 0)']
]
}
},
title: {
text: 'Matched and Unmatched Regions'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Percentage',
data: series
}]
});
}
function htmlbind() {
debugger;
var d = document.getElementById('pdfdiv');
var e = document.getElementById('hiddenTest');
e.value = d.innerHTML;
}
</script>
<%--<My:WebUserControl1 runat="server" ID="WebUserControl1" UserName="a" UserAge="45" UserCountry="Australia" />--%>
<%--<asp:PlaceHolder runat="server" ID="phUserInfoBox" />--%>
</head>
<body bgcolor="#999999">
<form id="form1" runat="server">
<asp:Button ID="button" Text="click" runat="server" OnClick="b1_click" OnClientClick="htmlbind();"/>
<asp:Button ID="button1" Text="click" runat="server" OnClick="b2_click" />
<div>
</div>
<div id="pdfdiv" runat="server">
<div id="container">
</div>
<br />
<br />
<asp:HiddenField ID="hfFilePath" runat="server" OnValueChanged="hfFilePath_ValueChanged" />
<input type="hidden" runat="server" id="hiddenTest" />
javascript :
function htmlbind() {
debugger;
var d = document.getElementById('pdfdiv');
var e = document.getElementById('hiddenTest');
e.value = d.innerHTML;
}
Hopes for suggestion.
src attribute of the pie chart image?pdfConverter opens a new session of the OP's web app, which may require authentication and/or Session variables for any browser-server interaction.You can find a pure HTML/Javascript example, but it also applicable for your case with a few adaptations.
http://jsfiddle.net/lucasdamiani/skrhd982/16/ (I won't put the code here because there is a bunch of HTML and Javascript)
You can use this function from the script:
saveSvgAsPng(el, options)
el is the svg element, and options can be null.
In this example I get the chart generated by highcharts and transform it as pure HTML, transforming the SVG image in a data URI.
See http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ for the detailed logic to converted the graphic into PNG.
本人是.net程序员,因为英语不行,使用工具翻译,希望对有需要的人有所帮助
如果本文质量不好,还请谅解,毕竟这些操作还是比较费时的,英语较好的可以看原文
