C＃如何在PDF文档中打印html Convas元素

Question

<div class='wrapper'>
    <canvas height='300' id='canvas_barchart' width='750'></canvas>

    <asp:HiddenField ID="hdn_Yaxis" runat="server" />
    <asp:HiddenField ID="hdn_Xaxis" runat="server" />
</div>
<script src="Chart_js/prefixfree.min.js"></script>
<script src='js/Chart.min.js'></script>

<script language="javascript">

    var Bar_yAxis = document.getElementById('<%=hdn_Yaxis.ClientID%>').value;
    var Bar_xAxis = document.getElementById('<%=hdn_Xaxis.ClientID%>').value;


    //alert("Y = " + yAxis + " X = " + xAxis);
    Bar_yAxis = Bar_yAxis.substring(0, Bar_yAxis.length - 1);
    Bar_xAxis = Bar_xAxis.substring(0, Bar_xAxis.length - 1);


    var Bar_arrayx = Bar_xAxis.split(',');



    var Bar_arrayY = Bar_yAxis.split(',').map(function (item) {
        return parseInt(item, 10);
    });


    var ctx = document.getElementById("canvas_barchart");

    var myBarChart = new Chart(ctx,
        {

            type: 'bar',

            data: {

                labels: Bar_arrayx,
                datasets: [
                    {

                        fill: true,
                        fillColor: "rgba(255, 153, 29,.8)",
                        lineTension: 0.1,
                        backgroundColor: "rgba(255, 153, 29,.8)",

                        borderColor: "rgba(255, 153, 29,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0,
                        borderJoinStyle: 'miter',


                        pointBorderColor: "rgba(255, 153, 29,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(255, 153, 29,1)",
                        pointHoverBorderColor: "rgba(255, 153, 29,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,


                        data: Bar_arrayY,
                        spanGaps: false,
                    }
                ]

            },
            options:
            {

                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                tooltips: {

                    callbacks: { // HERE YOU CUSTOMIZE THE LABELS
                        title: function () {
                            return null; //'eVMS';
                        },
                        beforeLabel: function (tooltipItem, data) {
                            return null; //'Date' + ': ' + tooltipItem.xLabel;
                        },
                        label: function (tooltipItem, data) {
                            return null;
                        },
                        afterLabel: function (tooltipItem, data) {
                            if (parseInt(tooltipItem.yLabel) == 1) return tooltipItem.yLabel + " hours";
                            else return tooltipItem.yLabel + " hours";
                        }

                    }

                }
            }
        });



</script>

what I need is write this element into pdf using c#

I already tried this :

using (MemoryStream stream1 = new MemoryStream())
{
    Paragraph p2 = new Paragraph(new Chunk(new iTextSharp.text.pdf.draw.LineSeparator(0.0F, 100.0F, iTextSharp.text.Color.BLACK, Element.ALIGN_LEFT, 1)));
    pdfDoc.Add(p2);

    pdfDoc.Add(new Phrase("\n"));
    pdfDoc.Add(new Phrase("\n"));

    canvas_barchart.SaveImage(stream1, ChartImageFormat.Png);
    iTextSharp.text.Image chartImage1 = iTextSharp.text.Image.GetInstance(stream1.GetBuffer());
    chartImage1.ScalePercent(75f); chartImage1.SpacingBefore = 100f;

    chartImage1.SpacingAfter = 110f;
    pdfDoc.Add(chartImage1); pdfDoc.Add(new Phrase("\n"));// pdfDoc.Add(new Phrase("\n")); pdfDoc.Add(new Phrase("\n"));

}

but I cannot use SaveImage() to save this control into stream because the control is run on client side not server side

either I access these element from server side and some how print it on pdf documnt , or print it on pdf from java script itself

any one have idea or another solution for this, I want to save this chart into PDF.

this is the image of convas element , I want to write it in pdf

Answer 1

on the client, you can use jsPDF ...

  var canvas = document.getElementById('canvas_barchart');
  var doc = new jsPDF();
  doc.addImage(ctx.toDataURL('image/png'), 0, 0);
  doc.save('chart.pdf');

or you can use ajax to send the image back to the server and save it there...

$.ajax({
  data: {
    image: ctx.toDataURL('image/png')
  },
  type: 'POST',
  url: 'server/saveImage'
});