如何将自动生成的HTML导出为PDF [英] How to export a auto generated HTML to PDF

问题描述

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

I have the following code which is partially what my HTML page does.

<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>

当我单击提交 code> displayPic 并使用 MainJavascript 将 FullName 功能。我想要做的是从输出创建一个PDF，但不幸的是所有的DLL和方法我发现要求我输出一个HTML文件，然后转换为PDF，但因为它使用JavaScript，源始终是空白，但显示

When I click the Submit button the displayPic and the FullName is replaced by the respective values using MainJavascript function. What I am looking to do is create a PDF from the output but unfortunately all the DLLs and method I found requires me to output a HTML file and then convert to a PDF but because it is using JavaScript, the source is always blank but the display is changed once the button is clicked.

如何实现我想要做的，是将输出转换为PDF？

How can I achieve what I am looking to do, is convert the output into a PDF?

推荐答案

你应该看看Xep CloudFormatter。这个库，jquery插件，打印任何html页面。所以，给你的例子，如果我开始一个HTML模板，像你有，然后使用javascript / jquery我填充html，然后调用xepOnline.Formatter.Format来渲染它，你会得到一个漂亮的PDF。

You should look at Xep CloudFormatter. This library, jquery plugin, prints any html page. So, given your example, if I were to start with an HTML template like you have, and then with javascript/jquery I populate the html and then call xepOnline.Formatter.Format to render it, you will get back a beautiful PDF.

我简化了你的代码，但这里是一个小提琴，你可以探索：

I simplified your code a bit, but here is a fiddle for you to explore:

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');
}

这篇关于如何将自动生成的HTML导出为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！