Преобразуйте SVG в Base64 и отправьте его на сервер для создания PDF

У меня есть график в формате svg, который на стороне клиента я конвертирую, чтобы получить строку Base64 для отправки на сервер. Затем сервер будет использовать эти данные svg вместе с другим параметром для создания PDF-файла с использованием PdfRpt.Core и отправит обратно клиенту.

Как отправить эту строку base64 в контроллер MVC. Я получаю слишком длинную ошибку URI запроса, и все параметры на стороне сервера принимаются как null

Любая помощь высоко ценится!

Javascript Code

function DownloadPdfServer() {
    html2canvas($("#MyDiv")[0]).then(function (canvas) {
        debugger;
        var base64Data = canvas.toDataURL("image/jpeg");
        var url = "/MyController/Action";
        var startDt = parseInt($('#StartDate').val(), 10);
        var endDt = parseInt($('#EndDate').val(), 10);

        var req = new XMLHttpRequest();
        var params = 'StartDate=' + startDt + '&EndDate=' + endDt + '&base64Data=' + base64Data;
        req.open("POST", url, true);
        req.responseType = "blob";
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                if (typeof window.navigator.msSaveBlob === 'function') {
                    window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
                } else {
                    var blob = req.response;
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = "PdfName-" + new Date().getTime() + ".pdf";
                    // append the link to the document body
                    document.body.appendChild(link);
                    link.click();
                }
            }
        };
        req.send(params);
    });
    return false;
}
document.getElementById('PrintPDF').addEventListener('click', DownloadPdfServer);


Код на стороне сервера:

public class MyController : BaseController
    {
        public async Task<ActionResult> Action(string StartDate, string EndDate, string base64Data)
        {
            string APIUrl = "Data/Get?StartDt = " + StartDate + "&EndDt = " + EndDate;
            try
            {
                // get data from api
                var userCriteria = await GetListFromApiAsync<CustomDto>(APIUrl);

                var reportBytes = PdfReport.CreateInMemoryPdfReport(userCriteria, StartDate, EndDate, base64Data);
                return File(reportBytes, "application/pdf");
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);
            }
        }
    }

Вы используете POST, но помещаете данные изображения в URL-адрес. Поместите данные изображения в фактическое тело POST.

Dan Wilson 10.04.2018 18:00

См .: stackoverflow.com/a/15312976/3608792, в частности FormData

Dan Wilson 10.04.2018 18:07

Да, используя FormData, я решил мою проблему. Спасибо, Дэн :)

Alvin 10.04.2018 18:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
143
0

Другие вопросы по теме