如何将 HTML 转换为字符串以在 JavaScript 中生成 PDF？答案

【问题标题】：How can I convert HTML to string for PDF generation in JavaScript?如何将 HTML 转换为字符串以在 JavaScript 中生成 PDF？
【发布时间】：2020-08-07 05:03:33
【问题描述】：

我想将我的 HTML DOM 元素转换为字符串，以便可以将其用于 Pdf 生成。

我在 JavaScript 中尝试了以下代码，但它返回了一个 HTML 元素。

    function getHtmlString() {
        var element=document.getElementById("pdfdiv"); 
        var str = element.innerHTML;
        console.log(str);
        return str;
    };

<div id="pdfdiv">
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!--<h3  style="margin-left:150px;"><strong> Patient Details</strong></h3>-->

        <table width="100%" style="padding:0px 105px">
            <thead>
                <tr>
                    <th>
                    </th>
                </tr>
                <tr>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <table style="float:left" width="75%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                       "Hi" @order.Id
                                    </td>
                                    <td>
                                        <h2><strong> Patient Order</strong></h2>
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
</div>

这将返回以下内容：

<!--!-->
<html><!--!-->
<!--!-->
    <meta charset="utf-8">
    <title></title>

<body><!--!-->


    <table width="100%" style="padding:0px 105px"><!--!-->
        <!--!--><thead>
            <tr>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
            </tr>
        </thead>
        <tbody><!--!-->
            <tr><!--!-->
                <td><!--!-->
                    <table style="float:left" width="75%"><!--!-->
                        <!--!--><thead>
                            <tr>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody><!--!-->
                            <tr><!--!-->
                                <td><!--!-->
                                   "Hi" 4<!--!-->
                                </td><!--!-->
                                <!--!--><td>
                                    <h2><strong> Patient Order</strong></h2>
                                </td>

                            </tr><!--!-->
                        </tbody><!--!-->
                    </table><!--!-->
                </td><!--!-->
            </tr><!--!-->
        </tbody><!--!-->
    </table><!--!-->
</body><!--!-->

因此，我无法通过将此字符串传递给PdfDocument document = htmlConverter.Convert(htmlstring); 来转换为 PDF。它会引发Error: Syncfusion.Pdf.PdfException: Html conversion failed 的异常。如何将 HTML DOM 元素转换为字符串？

【问题讨论】：

标签： javascript html pdf blazor syncfusion

【解决方案1】：

HTML 转换器中报告的异常可能是由于在 URL 转换方法中转换 HTML 字符串引起的。带有单个参数的 convert 方法用于 URL 到 PDF 的转换。请参考以下代码 sn-p 将 HTML 字符串转换为 PDF。请尝试使用以下代码 sn-p 进行转换，并让我们知道结果。

//Convert HTML string to PDF  
PdfDocument document = htmlConverter.Convert(htmlText, baseUrl);

KB：https://www.syncfusion.com/kb/9890/how-to-convert-html-string-to-pdf-using-c-and-net

https://www.syncfusion.com/kb/8174/how-to-preserve-resources-during-html-string-to-pdf-conversion

注意：我为 Syncfusion 工作。

【讨论】：

谢谢 gowtham 分享这个链接。实际上我的 html 字符串是错误的，所以这就是为什么出现异常。现在我使用 View 引擎和 ViewContext 转换我的剃刀视图，所以这会返回我预期的 Html 字符串。并且使用Syncfusion.HtmlToPdfConverter.QtWebKit.Net.Core 它对我有用。

【解决方案2】：

根据您的 JavaScript 设置方式，您的代码实际上正在返回一个字符串。

在这里看到：

var element=document.getElementById("pdfdiv"); 
var str = element.innerHTML;

console.log(str)
console.log("The variable type is...")
console.log(typeof(str))

&lt;div id="pdfdiv"&gt;Make me into a string, please!&lt;/div&gt;

解决方案很可能在于您似乎正在使用的库：Syncfusion。根据文档，Convert() 函数将 URL 作为参数，而不是 HTML 字符串。这就是导致程序抛出错误的原因。

我建议列出您在代码中使用的所有库，以便将来在 StackOverflow 上提出问题。

【讨论】：