javascript 从 html dom 创建可打印的 PDF

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9749372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 07:42:28  来源:igfitidea点击:

Create printable PDF from html dom

javascripthtmlpdfprinting

提问by Jonny

I have a web page in which a fair amount of the content is dynamically built up (jquery ajax etc) and have a requirement to present a printable version of it.

I'm coming across all the usual issues re html / printing, which I can probably (given time) get round, but it got me thinking - is there a way of taking the DOM and generating a PDF out of it using javascript. It's probably a bit of a daft question - it sounds a bit tricky, and I'm not too sure even if I could build up a PDF file using javascript, how I would then present it to the user.

What do people think?

我有一个网页,其中有相当数量的内容是动态构建的(jquery ajax 等),并且需要呈现它的可打印版本。

我遇到了关于 html/打印的所有常见问题,我可能(给定时间)可以解决这些问题,但这让我开始思考 - 有没有一种方法可以使用 DOM 获取 DOM 并从中生成 PDF。这可能是一个愚蠢的问题 - 听起来有点棘手,我不太确定即使我可以使用 javascript 构建一个 PDF 文件,然后我将如何将它呈现给用户。

人们怎么看?

采纳答案by Milindu Sanoj Kumarage

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
// Output as Data URI
doc.output('datauri');

https://parall.ax/products/jspdf, I think this will help you

https://parall.ax/products/jspdf,我想这会帮助你

回答by Nick

Thisis a question I asked a few days ago regarding a similar kind of site/problem.

是我几天前就类似网站/问题提出的一个问题。

My solution has been: (1) in Javascript, to set a cookie and then call a PHP script using location.href = ...;(not AJAX) and then (2) have the PHP script access the cookie to determine the sort of report required, and then echo a form which prompts the user to download a file using the correct headers. The PHP was something like the following:

我的解决方案是:(1) 在 Javascript 中,设置 cookie,然后使用location.href = ...;(不是 AJAX)调用 PHP 脚本,然后 (2) 让 PHP 脚本访问 cookie 以确定所需的报告类型,然后回显提示用户使用正确标题下载文件的表单。PHP 类似于以下内容:

header("Content-type: application/vnd.ms-word");
header("Content-Disposition: attachment;Filename=test.doc");

echo "<html>";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";
echo "<body>";
echo "Testing-2-3!";
echo "</body>";
echo "</html>";

It proved impossible to get what I wanted to happen using AJAX because AJAX never allows you to prompt the user.

事实证明,使用 AJAX 实现我想要的结果是不可能的,因为 AJAX 不允许您提示用户。

You could use this method do something similar, but in your case you'd generate a PDF rather than a .doc file (or download one that is pre-prepared).

您可以使用此方法做类似的事情,但在您的情况下,您将生成 PDF 而不是 .doc 文件(或下载预先准备好的文件)。

One advantage of this method, of course, is that it involves no page reloads.

当然,这种方法的一个优点是它不涉及页面重新加载。