从ASP.NET C#中的网页获取所有数据(包括图像)

Fetch all data (including image) from a webpage in asp.net c#
2020-11-25
  •  译文(汉语)
  •  原文(英语)

我想知道是否有可能我们可以使用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;
        }

希望提出建议.

速聊1:
src饼图图像的属性是什么?
速聊2:
-这个问题不是重复的.这里可能的问题是,pdfConverter打开了OP Web应用程序的新会话,这可能要求身份验证和/或Session变量才能进行任何浏览器-服务器交互.
速聊3:
好吧,我读错了问题.
速聊4:
您可能需要使用画布将图表客户端转换为图像,或使用其他服务器端图像图表脚本生成pdf
速聊5:
你能在这方面指导我吗?谢谢
解决过程1

您可以找到一个纯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/.

速聊1:
不可能所有的html数据都可以转换一次.?
速聊2:
抱歉,"HTML数据可以转换一次"的意思我没明白.您能说明一下吗?
速聊3:
我的意思是说是否要导入其他数据,为什么不导入饼图数据
速聊4:
如我所见,该图表是SVG标签,而不是图像.您还使用了highcharts,该图表具有内置功能以导出为PDF.您可以看一下这段代码jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/….它将在没有服务器端逻辑的情况下将图表导出为PDF.
速聊5:
但是这里的问题是我必须制作1个pdf来保存我的所有数据(包括图片)

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.

Talk1:
What is the src attribute of the pie chart image?
Talk2:
- this question is not a duplicate. The likely problem here is that pdfConverter opens a new session of the OP's web app, which may require authentication and/or Session variables for any browser-server interaction.
Talk3:
Ok I misread the question.
Talk4:
You would need to convert the chart client side to image using canvas, or use alternate server side image charting script for pdf
Talk5:
Can u plz guide me on this. Thanks
Solutions1

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.

Talk1:
Can't it be possible that all the html data could convert one time. ?
Talk2:
Sorry, I didn't get what you mean by "html data could convert one time". Could you please clarify the statement?
Talk3:
I mean to say if the other data is being imported, then why not the piechart data
Talk4:
As I can see, the chart is a SVG tag and not an image. You're also using highcharts, that has a built in function to export to PDF. You can take a look at this piece of code jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/…. It will export the chart to a PDF without your server side logic.
Talk5:
but the issue here is that i have to make 1 pdf holding all my data (including the image)
转载于:https://stackoverflow.com/questions/28091694/fetch-all-data-including-image-from-a-webpage-in-asp-net-c-sharp

本人是.net程序员,因为英语不行,使用工具翻译,希望对有需要的人有所帮助
如果本文质量不好,还请谅解,毕竟这些操作还是比较费时的,英语较好的可以看原文

留言回复
我们只提供高质量资源,素材,源码,坚持 下了就能用 原则,让客户花了钱觉得值
上班时间 : 周一至周五9:00-17:30 期待您的加入