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

Question

我想将我的 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); . 它抛出异常Error: Syncfusion.Pdf.PdfException: Html conversion failed 。 如何将 HTML DOM 元素转换为字符串？

Answer 1

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

在这里看到：

 var element=document.getElementById("pdfdiv"); var str = element.innerHTML; console.log(str) console.log("The variable type is...") console.log(typeof(str))

 <div id="pdfdiv">Make me into a string, please!</div>

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

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

Answer 2

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

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

请参阅以下链接以获取更多信息，

UG : https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/webkit#html-string-to-pdf

知识库： 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 工作。

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

问题描述

2 个解决方案

解决方案1
0 2020-04-23 19:02:53

解决方案2
0 已采纳 2020-04-30 12:06:10

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

问题描述

2 个解决方案

解决方案1 0 2020-04-23 19:02:53

解决方案2 0 已采纳 2020-04-30 12:06:10

解决方案1
0 2020-04-23 19:02:53

解决方案2
0 已采纳 2020-04-30 12:06:10