是否可以使用JavaScript或jquery将HTML页面另存为PDF？

Question 1

详细：

我生成了一个包含表的HTML页面。它有一个按钮“另存为PDF”。如果用户单击该按钮，则该HTML页面必须转换为PDF文件。

是否可以使用JavaScript或jquery？

Question 2

是的，请使用jspdf创建pdf文件。

然后，您可以将其转换为数据URI，并将下载链接插入DOM

但是，您需要自己编写HTML到pdf的转换。

只需使用页面的打印机友好版本，然后让用户选择他要如何打印页面即可。

编辑：显然，它具有最小的支持

因此，答案是编写您自己的PDF编写器或让一个现有的PDF编写器为您（在服务器上）做。

Question 3

是的，使用javascript非常容易。希望这段代码对您有用。

您将需要JSpdf库。

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle链接在这里

Question 4

这可能是一个较晚的答案，但这是最好的解决方法：https : //github.com/eKoopmans/html2pdf

纯JavaScript实现。允许您仅通过ID指定一个元素并进行转换。

Question 5

您可以使用Phantomjs。在此处下载并使用以下示例测试html-> pdf转换功能https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

示例代码：

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Question 6

我使用jsPDF和dom-to-image库将HTML导出为PDF。

我在这里发布有关谁关注的参考。

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

演示：https : //jsfiddle.net/viethien/md03wb21/27/

Question 7

这是我的操作方式，它不是防弹设计，您需要对其进行修改

用户单击另存为PDF按钮
使用ajax向服务器发送呼叫
服务器响应一个使用HTML生成的PDF的URL，我非常成功地使用了Apache FOP
处理ajax响应的js执行一次location.href来指向JS发送的URL，并在URL加载后立即使用内容处置标头作为附件发送文件，从而迫使用户下载文件。

Question 8

将html转换为pdf服务器端更加容易和可靠。我们正在使用Google Puppeteer。它可以通过包装程序很好地维护您选择的任何服务器端语言。Puppeteer使用无头Chrome浏览器来生成屏幕截图和/或PDF文件。这将为您省去很多麻烦，尤其是当您需要生成包含表格，图像，图形，多页等的复杂PDF文件时

https://developers.google.com/web/tools/puppeteer/

Question 9

使用JavaScript将HTML转换为PDf的另一种非常明显的方法是：使用在线API。如果用户离线时不需要进行转换，则此方法会很好用。

PdfMage是一种具有不错的API并提供免费帐户的选项。我相信您可以找到许多替代方法（例如，这里）

对于PdfMage API，您将具有以下内容：

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Question 10

是。例如，您可以通过https://grabz.it使用该解决方案。

它有一个Javascript API，可通过多种方式来抓取和操作屏幕截图。为了在您的应用程序中使用它，您需要首先获取一个应用程序密钥和机密，然后下载免费的Javascript SDK。

因此，让我们来看一个使用它的简单示例：

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

然后，稍等片刻，图像将自动出现在页面底部，而无需重新加载页面。

那是最简单的。有关图像处理，将屏幕快照附加到元素等的更多示例，请参阅文档。

Question 11

$('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
                    	<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
                        	<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
                            	<h2>Entrance Exam Hall Ticket</h2>
                            </div>
                            <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
                            	<div class="innerdiv" style="width: 80%;float: left;">
                            		<div class="restDet">
                                        <div class="div">
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Santanu Patra</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>D.O.B.</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>17th April, 1995</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Address</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Contact Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>9874563210</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Email Id</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>santanu@macallied.com</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Parent(s) Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>S. Patra</span><br /><span>7896541230</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Exam Center</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Institute of Engineering & Management</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Hall Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>COM-32</span>
                                            </div>
                                        </div>
                                    </div>
                            	</div>
                                <div class="sideDiv" style="width: 20%;float: left;">
                                	<div class="atts" style="float: left;width: 100%;">
                                    	<div class="photo" style="width: 115px;height: 150px;float: right;">
                                        	<img src="images/candidateImg.gif" style="width: 100%;"/>
                                        </div>
                                        <div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
                                        	<small>Self Attested</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info" id="cmd2">Download Token</button>

展开摘要

Question 12

简而言之：不。第一个问题是对文件系统的访问，由于安全原因，在大多数浏览器中默认将其设置为no。现代浏览器有时以数据库形式支持简约存储，或者您可以要求用户启用文件访问。

如果您有权访问文件系统，那么将其另存为HTML并不是那么困难（请参阅JS文档中的文件对象）-但是PDF并不是那么容易。PDF是一种非常高级的文件格式，确实不适合Javascript。它要求您以Javascript不直接支持的数据类型（例如单词和四边形）编写信息。您还需要预定义必须保存到文件中的字典查找系统。我确信有人可以使其工作，但是花更多的精力和时间来学习C ++或Delphi会更好。

但是，如果用户为您提供非受限访问，则应该可以进行HTML导出