Is it possible to save HTML page as PDF using JavaScript or jquery?

小开

简而言之，没有。 The first problem is access to the filesystem, which in most browsers is set to no by default due to security reasons. Modern browsers sometimes support minimalistic storage in the form of a database, or you can ask the user to enable file access.

如果您可以访问文件系统，那么将其保存为 HTML 并不难(请参阅 JS 文档中的文件对象) ，但是 PDF 并不那么容易。PDF 是一种相当高级的文件格式，确实不适合 Javascript。它要求您使用 Javascript 不直接支持的数据类型来编写信息，比如 word 和 quad。您还需要预先定义必须保存到文件中的字典查找系统。我相信有人可以让它工作，但所涉及的努力和时间将更好地用于学习 C + + 或 Delphi。

HTML export however should be possible if the user gives you non restricted access

小开

Here is how I would do it, its an idea not bulletproof design, you need to modify it

The user clicks the save as PDF button
The server is sent a call using ajax
服务器通过使用 HTML 生成 PDF 的 URL 进行响应，我已经非常成功地使用了 ApacheFOP
处理 ajax 响应的 JS 执行 location.href 命令来指向 JS 发送的 URL，一旦 URL 加载，它就使用内容处理标头作为附件发送文件，迫使用户下载文件。

小开

是，使用 Jspdf创建 pdf 文件。

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

然而，您需要自己编写 HTML 到 pdf 的转换。

Just use printer friendly versions of your page and let the user choose how he wants to print the page.

编辑: 显然它的支持很少

所以答案就是自己编写 PDF 文档，或者让现有的 PDF 文档编写器(在服务器上)为你编写。

小开

您可以使用 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

小开

Ya its very easy to do with javascript. Hope this code is useful to you.

You'll need the 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 链接

小开

There is another very obvious way to convert HTML to PDf using JavaScript: use an online API for that. This will work fine if you don't need to do the conversion when the user is offline.

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

小开

这可能是一个迟到的回答，但这是最好的回答: Https://github.com/ekoopmans/html2pdf

纯 javascript 实现。允许您仅通过 ID 指定单个元素并转换它。

小开

是的。例如，您可以使用 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>

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

这是最简单的一个。更多的例子与图像操作，附加截图的元素等检查的文件。

小开

$('#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>

小开

将 html 转换为 pdf 服务器端更加容易和可靠。我们正在使用谷歌木偶师。对于您选择的任何服务器端语言，都可以使用包装器进行良好的维护。Puppeteer 使用无头 Chrome 来生成屏幕截图和/或 PDF 文件。它将为您节省大量的头痛，特别是如果您需要生成复杂的 PDF 文件与表格，图像，图形，多个页面等

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

小开

我使用 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/

小开

有类似的问题，不能使用 jspdf，因为我的遗留代码包含多个表，其中有几个 colspan。在 Jspdf head > th’s must match tbody > tr > td 中，必须匹配 tbody > tr > td

我最终使用了对我有用的 html2pdf 包

在文件中添加库

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" integrity="sha512-vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

获取要保存为 pdf 的内容

var pdf_content = document.getElementById("pdf_body");

向文件中添加选项或配置

var options = {
margin:       1,
filename:     'isolates.pdf',
image:        { type: 'jpeg', quality: 0.98 },
html2canvas:  { scale: 2 },
jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

保存文件

html2pdf(pdf_content, options);

小开

I know this is an old question, but depending on the readers use case an easy way is to call window.print() and tell the user to choose the save as PDF option. In CSS you can use media queries to hide or show content specifically for printing so you can control what is shown on the PDF. For example I use these .no-print and .only-print for this purpose.

.only-print {
display: none
}
@media print {
.no-print {
display: none
}
.only-print {
display: block
}
}

在我的用例中，我隐藏了所有的导航和按钮的东西，我也隐藏了一些折叠的块，而是显示了所有未折叠的块。