Telerik kendo ui绘图导出PDF发送到服务器

Question

我在 kendo ui (here) 中使用此绘图功能

为用户导出 PDF 效果很好

但我想使用 AJAX 将 PDF 提交回服务器。

为什么我想要它？ 我想允许客户从我的服务器发送带有 PDF 的电子邮件

Answer 1

这里是向服务器发送请求的代码：

  kendo.drawing.drawDOM($("#statement-print-area"))
                  .then(function (group) {
                      // Render the result as a PDF file
                      return kendo.drawing.exportPDF(group, {
                          paperSize: "auto",
                          margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                      });
                  })
                  .done(function (data) {
                      $.ajax({
                          type: "POST",
                          url: "/Customer/EmailStatement",
                          processData: false,  // tell jQuery not to process the data
                          contentType: false,  // tell jQuery not to set contentType
                          data: '{ "docData" : "' + data + '" ,"email": "' + vm.sendEmailTo + '"}',
                          contentType: 'application/json; charset=utf-8',
                          dataType: 'json',
                      }).done(handleResponseInfo).fail(ajaxError);
                  });

这是服务器端的代码（asp.net MVC）

            docData = docData.Replace("data:application/pdf;base64,", "");
            byte[] bytes = Convert.FromBase64String(docData);
            Stream stream = new MemoryStream(bytes);
new Attachment(stream, "Customer statement.pdf", "application/pdf")

                message.Attachments.Add(attachment);

Answer 2

这是另一个例子：

<script>

    $(function () {
        $("#button0PDF").kendoButton();
        var button = $("#button0PDF").data("kendoButton");

        button.bind("click", function (e) {
            kendo.drawing.drawDOM("#divId", {
                forcePageBreak: ".page-break",
                //template: $("#page-template").html()

            })
            .then(function (group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group, {
                    landscape: false
                });
            })
            .done(function (data) {
                // Save the PDF file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "fileName.pdf",
                    proxyURL: "/API/Main/Post",
                });
            });
        });
    });

</script>

以及服务器端部分：

public HttpResponseMessage Post([FromBody]FileData file)
        {
            var data = Convert.FromBase64String(file.Base64);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(new MemoryStream(data))
            };

            result.Content.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);

            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = file.FileName
            };

            return result;
        }