如何将自动生成的 HTML 导出为 PDF

Question

我有以下代码，这部分是我的 HTML 页面所做的。

<script>
function close() {
    MainJavaScript();
}
function MainJavaScript()
{
    //var strEntity = " ";
    var strEntity = document.getElementById('Entity').value;
    //Images setup by Entity
    if (strEntity == "MGP") 
    {
        document.getElementById('displayPic').src="http://mgp75.png";
    }
    else if (strEntity == "MPP")
    {
        document.getElementById('displayPic').src="http://mpp75.png";
    }
    else if (strEntity == "RSC")
    {
        document.getElementById('displayPic').src="http://rsc75.png";
    }
    else if (strEntity == "MSN")
    {
        document.getElementById('displayPic').src="http://msn75.png";
    }

    var strFirstName = "John";
    var strLastName = "Doe";
    var strSuffix = " ";
    var strTitle = "DDS";
    var strSecondaryTitle = " ";
    var strDisplayName = strFirstName + " " + strLastName;
    if (strTitle.trim() != '')
        strDisplayName += ", " + strTitle;
    if (strSuffix.trim() != '')
        strDisplayName += ", " + strSuffix;
    if (strSecondaryTitle.trim() !='')
        strDisplayName += ", " + strSecondaryTitle;


    document.getElementById('FullName').innerHTML = strDisplayName;
}
</script>

<a href="javascript:close()">Submit</a>


<table>
    <tr>
        <td width="55%">

            <div class="first">
                <div class="contact-info">
                    <h3><img id="displayPic" src="" alt=""></h3>
                </div><!--// .contact-info -->
            </div>
        </td>
        <td width="40%">
            <div>
                <h1><font color="#003893" face="Georgia">Cu Vi</font></h1>
                <h2><span id="FullName"></span></h2>
            </div>
        </td>
    </tr>
</table>

当我单击 Submit 按钮时，displayPic 和 FullName 使用 MainJavascript 函数替换为各自的值。我想做的是从输出中创建一个 PDF，但不幸的是，我发现的所有 DLL 和方法都需要我输出一个 HTML 文件，然后转换为 PDF，但是因为它使用的是 JavaScript，所以源始终为空白，但显示单击按钮后会更改。

我怎样才能实现我想要做的，将输出转换为 PDF？

Answer 1

你应该看看 Xep CloudFormatter。这个库，jquery 插件，打印任何 html 页面。因此，以您的示例为例，如果我从您拥有的 HTML 模板开始，然后使用 javascript/jquery 填充 html，然后调用 xepOnline.Formatter.Format 来呈现它，您将得到一个漂亮的 PDF。

我稍微简化了你的代码，但这里有一个小提琴供你探索：

http://jsfiddle.net/kstubs/56x6W/

function printMe() {
  tryAtMain();
  var imgLoad = imagesLoaded($('#displayPic')[0]);
  imgLoad.on( 'always', function() {
      xepOnline.Formatter.Format('print_me', {
          pageMargin: ".25in"
      });
  });
}

function tryAtMain() {
// some pic
$('#displayPic').attr('src','http://lorempixel.com/output/abstract-q-c-370-222-1.jpg');
$('#FullName').html('Johnny Carson');
}