如何将大字符串从 JavaScript 发送到 Asp Net Core答案

【问题标题】：How to send large string from JavaScript to Asp Net Core如何将大字符串从 JavaScript 发送到 Asp Net Core
【发布时间】：2019-03-07 14:22:18
【问题描述】：

我正在尝试使用wkhtmltopdf 将 HTML 代码制作成 PDF。在 C# 中，我使用 Process 来执行所有操作。我需要通过 JavaScript 从我的 HTML 页面获取特定的<div>，并将所有这些内容发送到我的 Asp。当前尝试将此字符串作为参数传递到 URL，但它太长了。有没有其他方法可以使用 JS 获取大的 HTML 字符串，并将其发送到 .NET Core，并将其内容制作成 PDF？

function getDBData(src)
{
    let script = document.createElement("SCRIPT");
    script.src = backend + src;
    document.getElementsByTagName("head")[0].appendChild(script);
}

function tableToPdf()
{
    // Add in htmlContent heade
    let htmlContent = "<head><link rel=\"stylesheet\" href=\"table- 
                       style.css\" media=\"all\"/></head>";

     // Get all tables 
     let tables = document.querySelectorAll("#tableWrapper .col-lg-12");

     for(let i = 0; i < tables.length; i++)
     {
         // Get header of table
         let tableHeader = tables[i].querySelector(".tableHeader").outerHTML;

        // Get table content
        let tableContent = tables[i].querySelectorAll(".wrapper-table-section-library")[1].outerHTML;

        htmlContent += tableHeader 
        htmlContent += tableContent;
      }

    // Get width ant height of tableWrapper
    let height = document.querySelector("#tableWrapper").offsetHeight;
    let width = document.querySelector("#tableWrapper").offsetWidth;

    getDBData("getTablePdf?width=" + width + "&height=" + height +"&htmlContent=" + htmlContent + "&outputFileName=tables");        
}

【问题讨论】：

不要使用查询参数发送大量数据，您会受到 URL 中字符数的限制。相反，POST 消息正文中的数据。
你能提供一个链接吗？
没有链接，事情就是这样。
你听说过Rotativa吗？它是 wkhtmltopdf 的包装器，让您轻松创建 PDF。 here 以 nuget 包的形式提供
你是通过script标签做ajax请求吗？哦，我的

标签： javascript c# asp.net-core

【解决方案1】：

假设您已经有一个大字符串：

var largeString = '...';

将这些数据从脚本发送到后端的一种方法是执行 AJAX POST 请求：

$.ajax({
    url: '/Sample/PrintDocument',
    type: 'POST',
    data: JSON.stringify({
        dataToPrint: largeString
    }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
})
.done(function(result) {
    // ... do something after the request was processed
});

现在，如果您想在用户单击“打印”按钮时发送此请求：

$('body').on('click', '#printButton', function (){
    // Do the POST request
    $.ajax({
        ...
});

然后在你的控制器中你会有这样的东西：

public class SampleController : Controller
{
    ...
    [HttpPost]
    public async Task<JsonResult> PrintDocument([FromBody] string dataToPrint)
    {
        ...
    }
}

【讨论】：

您的 AJAX 代码是用 JQuery 编写的吗？我用的是纯 JavaScript，有纯 JS 版本的吗？

【解决方案2】：

如果您使用 Blazor 服务器端，SignalR 的有效负载大小是有限的。默认大小值为 32kb。您可以更改它，但这不是一个好习惯。实例，您可以将字符串拆分为数组子字符串或上传文件。

【讨论】：