blocks|key|822657|text|简而言之:不。第一个问题是对文件系统的访问，由于安全原因，在大多数浏览器中，默认情况下将文件系统设置为no。现代浏览器有时以数据库的形式支持最低限度的存储，或者您可以要求用户启用文件访问。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822658|如果您有权访问文件系统，那么另存为HTML并不那么难(请参阅JS文档中的file对象)-但PDF就不那么容易了。PDF是一种非常高级的文件格式，并不适合Javascript。它要求您以Javascript不直接支持的数据类型编写信息，例如word和quad。您还需要预定义字典查找系统，该系统必须保存到文件中。我相信有人可以让它工作，但所涉及的努力和时间将更好地花在学习C%2B%2B或Delphi上。|822659|但是，如果用户向您提供无限制的访问权限，则应该可以导出HTML|822660|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>In short: no.
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.</p>

<p>If you have access to the filesystem then saving as HTML is not that hard (see the file object in the JS documentation) - but PDF is not so easy. PDF is a quite advanced file-format that really is ill suited for Javascript. It requires you to write information in datatypes not directly supported by Javascript, such as words and quads. You also need to pre-define a dictionary lookup system that must be saved to the file. Im sure someone could make it work, but the effort and time involved would be better spent learning C++ or Delphi.</p>

<p>HTML export however should be possible if the user gives you non restricted access</p>


blocks|key|822726|text|您可以使用Phantomjs。下载here并使用以下示例测试html->pdf转换功能https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|822727|示例代码：|822728|phantomjs.exe+examples/rasterize.js+http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html+sample.pdf|code-block|syntax|javascript|822729|entityMap|0|LINK|mutability|MUTABLE|url|http://phantomjs.org/download.html|1|https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js^0|H|4|0|17|1W|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You can use Phantomjs. Download <a href="http://phantomjs.org/download.html" rel="noreferrer">here</a> and use the following example to test the html->pdf conversion feature <a href="https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js" rel="noreferrer">https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js</a></p>

<p>Example code:</p>

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


blocks|key|607722|text|是的，用javascript很容易做到。希望这段代码对你有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|607723|您将需要JSpdf+library。|offset|length|607724|<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>|code-block|syntax|javascript|607725|jsfiddle++link+here|607726|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF|1|https://jsfiddle.net/j8cnsdw3/^0|0|4|D|0|0|0|0|J|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Ya its very easy to do with javascript. Hope this code is useful to you.</p>
<p>You'll need the <a href="https://github.com/MrRio/jsPDF" rel="noreferrer">JSpdf library</a>.</p>
<pre><code>&lt;div id=&quot;content&quot;&gt;
     &lt;h3&gt;Hello, this is a H3 tag&lt;/h3&gt;

    &lt;p&gt;a pararaph&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&quot;editor&quot;&gt;&lt;/div&gt;
&lt;button id=&quot;cmd&quot;&gt;Generate PDF&lt;/button&gt;

&lt;script&gt;
    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.
&lt;/script&gt;
</code></pre>
<p><a href="https://jsfiddle.net/j8cnsdw3/" rel="noreferrer">jsfiddle  link here</a></p>


blocks|key|822806|text|还有另一种使用JavaScript将HTML转换为PDf的非常明显的方法:使用在线应用程序接口。如果您不需要在用户离线时进行转换，这将很好地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822807|PdfMage是一种有很好的应用程序接口并提供免费帐户的选择。我相信您可以找到许多替代方案(例如，here)|offset|length|822808|对于PdfMage应用程序接口，你会得到类似这样的东西：|822809|+$.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");
++++}
});|code-block|syntax|javascript|822810|entityMap|0|LINK|mutability|MUTABLE|url|https://pdfmage.org/|1|https://stackoverflow.com/a/5344424/1474386^0|0|0|7|0|1D|4|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]|$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>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.</p>

<p><a href="https://pdfmage.org" rel="nofollow noreferrer">PdfMage</a> is one option that has a nice API and offers free accounts. I'm sure you can find many alternatives (for example, <a href="https://stackoverflow.com/a/5344424/1474386">here</a>) </p>

<p>For PdfMage API you'd have something like this:</p>

<pre><code> $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"&lt;html&gt;&lt;body&gt;Hi there!&lt;/body&gt;&lt;/html&gt;" },
    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");
    }
});
</code></pre>


blocks|key|822852|text|这可能是一个迟来的答案，但这是最好的答案：https://github.com/eKoopmans/html2pdf|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|822853|纯javascript实现。允许您仅按ID指定单个元素并对其进行转换。|822854|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/eKoopmans/html2pdf^0|L|11|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>This might be a late answer but this is the best around:
<a href="https://github.com/eKoopmans/html2pdf" rel="noreferrer">https://github.com/eKoopmans/html2pdf</a></p>

<p>Pure javascript implementation.
Allows you to specify just a single element by ID and convert it.</p>


blocks|key|607872|text|是。例如，您可以使用https://grabz.it提供的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|607873|它有一个Javascript+API，可以以不同的方式使用来抓取和操作屏幕截图。为了在你的应用程序中使用它，你需要首先获得一个app+key+and+secret并download免费的Javascript+SDK。|607874|因此，让我们来看一个使用它的简单示例：|607875|//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>|code-block|syntax|javascript|607876|然后只需稍等片刻，图像就会自动出现在页面底部，而无需重新加载页面。|607877|这是最简单的一个。有关图片操作、元素截图等的更多示例，请查看documentation。|607878|entityMap|0|LINK|mutability|MUTABLE|url|https://grabz.it/|1|https://grabz.it/api/#Key|2|https://grabz.it/api/javascript/download.ashx|3|https://grabz.it/api/javascript/^0|A|G|0|0|1R|I|1|2A|8|2|0|0|0|0|U|D|3|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|Q|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]|12|$5|T|U|V|C|$W|13]]]]

<p>Yes. For example you can use the solution by <a href="https://grabz.it" rel="nofollow noreferrer">https://grabz.it</a>. </p>

<p>It's got a Javascript API which can be used in different ways to grab and manipulate the screenshot. In order to use it in your app you will need to first get an <a href="https://grabz.it/api/#Key" rel="nofollow noreferrer">app key and secret</a> and <a href="https://grabz.it/api/javascript/download.ashx" rel="nofollow noreferrer">download</a> the free Javascript SDK. </p>

<p>So, let's see a simple example for using it:</p>

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

<p>Then simply wait a short while and the image will automatically appear at the bottom of the page, without you needing to reload the page.</p>

<p>That's the simplest one. For more examples with image manipulation, attaching screenshots to elements and etc check the <a href="https://grabz.it/api/javascript/" rel="nofollow noreferrer">documentation</a>.</p>


blocks|key|607909|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|607910|$('#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');
++	});
});|code-block|syntax|javascript|607911|<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%25;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%25;position:+relative;">
++++++++++++++++++++++++++++	<div+class="innerdiv"+style="width:+80%25;float:+left;">
++++++++++++++++++++++++++++		<div+class="restDet">
++++++++++++++++++++++++++++++++++++++++<div+class="div">
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Name</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>Santanu+Patra</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>D.O.B.</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>17th+April,+1995</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Address</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>P.S.+Srijan+Corporate+Park,+Saltlake,+Sector+5,+Kolkata-91</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Contact+Number</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>9874563210</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Email+Id</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>santanu@macallied.com</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Parent(s)+Name</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>S.+Patra</span><br+/><span>7896541230</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Exam+Center</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>Institute+of+Engineering+&+Management</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="label"+style="width:+30%25;float:+left;">
++++++++++++++++++++++++++++++++++++++++++++++++<strong>Hall+Number</strong>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++<div+class="data"+style="width:+70%25;display:+inline-block;">
++++++++++++++++++++++++++++++++++++++++++++++++<span>COM-32</span>
++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++	</div>
++++++++++++++++++++++++++++++++<div+class="sideDiv"+style="width:+20%25;float:+left;">
++++++++++++++++++++++++++++++++	<div+class="atts"+style="float:+left;width:+100%25;">
++++++++++++++++++++++++++++++++++++	<div+class="photo"+style="width:+115px;height:+150px;float:+right;">
++++++++++++++++++++++++++++++++++++++++	<img+src="images/candidateImg.gif"+style="width:+100%25;"/>
++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++<div+class="sign"+style="position:+absolute;bottom:+0;right:+0;border-top:+1px+dashed+#000;left:+80%25;text-align:+right;">
++++++++++++++++++++++++++++++++++++++++	<small>Self+Attested</small>
++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++++++<button+class="btn+btn-info"+id="cmd2">Download+Token</button>|607912|607913|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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');
  	});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"&gt;&lt;/script&gt;

&lt;div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;"&gt;
                    	&lt;div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;"&gt;
                        	&lt;div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;"&gt;
                            	&lt;h2&gt;Entrance Exam Hall Ticket&lt;/h2&gt;
                            &lt;/div&gt;
                            &lt;div class="parentdiv" style="display: inline-block;width: 100%;position: relative;"&gt;
                            	&lt;div class="innerdiv" style="width: 80%;float: left;"&gt;
                            		&lt;div class="restDet"&gt;
                                        &lt;div class="div"&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Name&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;Santanu Patra&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;D.O.B.&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;17th April, 1995&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Address&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Contact Number&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;9874563210&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Email Id&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;santanu@macallied.com&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Parent(s) Name&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;S. Patra&lt;/span&gt;&lt;br /&gt;&lt;span&gt;7896541230&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Exam Center&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;Institute of Engineering &amp; Management&lt;/span&gt;
                                            &lt;/div&gt;
                                            &lt;div class="label" style="width: 30%;float: left;"&gt;
                                                &lt;strong&gt;Hall Number&lt;/strong&gt;
                                            &lt;/div&gt;
                                            &lt;div class="data" style="width: 70%;display: inline-block;"&gt;
                                                &lt;span&gt;COM-32&lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                            	&lt;/div&gt;
                                &lt;div class="sideDiv" style="width: 20%;float: left;"&gt;
                                	&lt;div class="atts" style="float: left;width: 100%;"&gt;
                                    	&lt;div class="photo" style="width: 115px;height: 150px;float: right;"&gt;
                                        	&lt;img src="images/candidateImg.gif" style="width: 100%;"/&gt;
                                        &lt;/div&gt;
                                        &lt;div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;"&gt;
                                        	&lt;small&gt;Self Attested&lt;/small&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;button class="btn btn-info" id="cmd2"&gt;Download Token&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|822984|text|将html转换为pdf服务器端要容易得多，也更可靠。我们正在使用Google+Puppeteer。它通过您选择的任何服务器端语言的包装器得到了很好的维护。Puppeteer使用无头Chrome来生成屏幕截图和/或PDF文件。它将为您省去很多麻烦，特别是当您需要生成包含表格、图像、图形、多页等内容的复杂PDF文件时|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822985|https://developers.google.com/web/tools/puppeteer/|offset|length|822986|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>It is much easier and reliable to convert html to pdf server side. We are using Google Puppeteer. It is well maintained with wrappers for any server side language of your choosing. Puppeteer uses headless Chrome to generate screenshots and/or PDF files. It will save you a LOT of headache especially if you need to generate complex PDF files with tables, images, graphs, multiple pages and so</p>

<p><a href="https://developers.google.com/web/tools/puppeteer/" rel="nofollow noreferrer">https://developers.google.com/web/tools/puppeteer/</a></p>


blocks|key|608004|text|我使用jsPDF和dom-to-image库将HTML导出为PDF。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|608005|我在这里发帖，以供大家参考。|608006|$('#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");
++++++});
});|code-block|syntax|javascript|608007|演示：https://jsfiddle.net/viethien/md03wb21/27/|608008|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/viethien/md03wb21/27/^0|3|5|9|C|0|0|0|3|16|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>I used <code>jsPDF</code> and <code>dom-to-image</code> library to export HTML to PDF.</p>

<p>I post here as reference to whom concern.</p>

<pre><code>$('#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");
      });
});
</code></pre>

<p>Demo: <a href="https://jsfiddle.net/viethien/md03wb21/27/" rel="noreferrer">https://jsfiddle.net/viethien/md03wb21/27/</a></p>


blocks|key|608082|text|有类似的问题，无法使用jspdf，因为我的遗留代码包含多个表，其中有几个colspan。在Jspdf中，thead+>th的必须与tbody+>+tr+>+td匹配|type|unstyled|depth|inlineStyleRanges|entityRanges|data|608083|我最终使用了html2pdf包，它对我很有效|608084|在您的文件中添加库|608085|<script+src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js"+integrity="sha512-vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo%2BUjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A=="+crossorigin="anonymous"+referrerpolicy="no-referrer"></script>|code-block|syntax|javascript|608086|获取要另存为pdf的内容|608087|var+pdf_content+=+document.getElementById("pdf_body");|608088|将选项或配置添加到文件中|608089|var+options+=+{
++++++margin:+++++++1,
++++++filename:+++++'isolates.pdf',
++++++image:++++++++{+type:+'jpeg',+quality:+0.98+},
++++++html2canvas:++{+scale:+2+},
++++++jsPDF:++++++++{+unit:+'in',+format:+'letter',+orientation:+'portrait'+}
++++};|608090|保存文件|608091|html2pdf(pdf_content,+options);|608092|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>Had similar issue, could not use jspdf since my legacy code contained multiple tables with several colspan inside. In Jspdf thead &gt; th's must match tbody &gt; tr &gt; td</p>
<p>I ended up using html2pdf package which worked for me</p>
<p>on your file add the library</p>
<pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js&quot; integrity=&quot;sha512-vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
</code></pre>
<p>Get the content you want to save as pdf</p>
<pre><code>var pdf_content = document.getElementById(&quot;pdf_body&quot;);
</code></pre>
<p>Add option or configuration to your file</p>
<pre><code>var options = {
      margin:       1,
      filename:     'isolates.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
</code></pre>
<p>Save the file</p>
<pre><code>html2pdf(pdf_content, options);
</code></pre>


blocks|key|823134|text|我知道这是一个古老的问题，但根据读者的用例，一种简单的方法是调用window.print()并告诉用户选择save+as+PDF选项。在CSS中，您可以使用媒体查询来隐藏或显示专门用于打印的内容，以便您可以控制PDF上显示的内容。例如，我将这些.no-print和.only-print用于此目的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|823135|.only-print+{
+++display:+none
}
@media+print+{
++.no-print+{
++++display:+none
++}
++.only-print+{
++++display:+block
++}
}|code-block|syntax|javascript|823136|在我的用例中，我隐藏了所有导航和按钮的东西，我还隐藏了一些折叠的块，而不是显示所有未折叠的块。|823137|entityMap^0|W|E|1H|B|3E|9|3O|B|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>I know this is an old question, but depending on the readers use case an easy way is to call <code>window.print()</code> and tell the user to choose the <code>save as PDF</code> 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 <code>.no-print</code> and <code>.only-print</code> for this purpose.</p>
<pre><code>.only-print {
   display: none
}
@media print {
  .no-print {
    display: none
  }
  .only-print {
    display: block
  }
}
</code></pre>
<p>In my use case I hide all the navigation and buttons stuff, I also hide some collapsed blocks and instead show all the uncollapsed blocks.</p>


<p>Is it possible to save HTML page as PDF using JavaScript or jquery?</p>

<p>In Detail:</p>

<p>I generated one HTML Page which contains a table . It has one button 'save as PDF'. If user clicks that button then that HTML page has to convert as PDF file.</p>

<p>Is it possible using JavaScript or jquery?</p>


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

文件系统

数据库

服务器

是否可以使用JavaScript或jquery将HTML页面保存为PDF？详细说明：我生成了一个包含表的HTML页面。它有一个“另存为PDF”按钮。如果用户单击该按钮，则HTML页面必须转换为PDF文件。可以使用JavaScript或jquery吗？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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