blocks|key|86538|text|有了一个新的jQuery+%2B云解决方案，可以将任何HTML页面及其CSS+(包括印刷媒体规则)呈现为PDF。解决方案设置为打印网页的任何区域，您只需告诉格式化程序要打印哪个容器元素，其他工作由库完成。你得到的是一个可嵌入的PDF，否则后台会推回一个PDF供你下载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|86539|这是你的库(GitHub)：|86540|https://github.com/Xportability/css-to-pdf|offset|length|86541|这是你的小提琴：|86542|http://jsfiddle.net/kstubs/jrtM5/|86543|下面是一个有效的演示：|86544|http://xep.cloudformatter.com/doc/|86545|目前还没有用法说明，但是下面的示例(查看源代码)应该很简单(查找Print+It按钮)，这里或多或少是Format方法可以理解的附加选项/参数。|86546|options+
{
++++pageWidth:+"8.5in",+++++++++++++
++++pageHeight:+"11in",+
++++pageMargin:+".25in",+
++++pageMarginTop:+"1in",
++++pageMarginRight:+"1in",
++++pageMarginBottom:+"1in",
++++pageMarginLeft:+"1in",
++++render:+("none"%7C"newwin<default>"%7Cembed"%7C"download<default+IE>"),
++++foStyle:+{+
++++++++//+puts+fo+style+attributes+on+the+root,+ex.+fontSize:14px
++++++++foStyleName:+'value',+...
++++}+++++++++++
}|code-block|syntax|javascript|86547|以下是当前支持的CSS属性列表。|86548|[
++++'lineHeight',+
++++'alignmentBaseline',+
++++'backgroundImage',+'backgroundPosition',+'backgroundRepeat',+'backgroundColor',
++++'baselineShift',+
++++'border',
++++'borderWidth',+'borderColor','borderStyle',
++++'borderTop','borderLeft','borderRight','borderBotttom',
++++'borderTopWidth','borderTopStyle','borderTopColor',+
++++'borderBottomWidth','borderBottomStyle','borderBottomColor',
++++'borderLeftWidth','borderLeftStyle','borderLeftColor',
++++'borderRightWidth','borderRightStyle','borderRightColor',
++++'borderCollapse',+++++++++++++
++++'clear',+'color',+
++++'display',+'direction',+'dominantBaseline',+
++++'fill',+'float',+
++++'fontStyle',+'fontVariant',+'fontWeight',+'fontSize',+'fontFamily',+
++++'listStyleType',+'listStyleImage',+'letterSpacing',+
++++'marginTop',+'marginBottom',+'marginLeft',+'marginRight','orphans',+
++++'paddingTop',+'paddingRight',+'paddingBottom',+'paddingLeft',
++++'pageBreakAfter',+'pageBreakBefore',+
++++'tableLayout',+
++++'textAlign',+'textAnchor','textDecoration',+'textIndent',+'textTransform',+
++++'verticalAlign',
++++'widows',+'wordSpacing',+'width'
]|86549|希望这能有所帮助！|86550|entityMap|0|LINK|mutability|MUTABLE|url|1|2^0|0|0|0|16|0|0|0|0|X|1|0|0|0|Y|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@$F|1E|G|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@$F|1J|G|1K|1|1L]]|A|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1N|8|@]|9|@$F|1O|G|1P|1|1Q]]|A|$]]|$1|P|3|Q|5|6|7|1R|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1S|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1U|8|@]|9|@]|A|$U|V]]|$1|10|3|11|5|6|7|1V|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|E]]|19|$5|15|16|17|A|$18|K]]|1A|$5|15|16|17|A|$18|O]]]]

There is a new jQuery + cloud solution that will render any HTML page and its CSS (including print media rules) to PDF. The solution is setup to print any region of your webpage, you just tell the Formatter which container element you want to print and the library does the rest. What you get back is an embeddable PDF or the backend will push back a PDF for download.

Here's your library (GitHub): 
<a href="https://github.com/Xportability/css-to-pdf" rel="nofollow noreferrer">https://github.com/Xportability/css-to-pdf</a>

Here's your fiddle: 
<a href="http://jsfiddle.net/kstubs/jrtM5/" rel="nofollow noreferrer">http://jsfiddle.net/kstubs/jrtM5/</a>

Here's a working demo: 
<a href="http://xep.cloudformatter.com/doc/" rel="nofollow noreferrer">http://xep.cloudformatter.com/doc/</a>

Currently there are not useage instructions, but following along with the samples (view source) should be pretty self-explanatory (look for the Print It buttons) and here is, more or less the additional options/parameters that the Format method understands.

<pre><code>options 
{
 pageWidth: "8.5in", 
 pageHeight: "11in", 
 pageMargin: ".25in", 
 pageMarginTop: "1in",
 pageMarginRight: "1in",
 pageMarginBottom: "1in",
 pageMarginLeft: "1in",
 render: ("none"|"newwin&lt;default&gt;"|embed"|"download&lt;default IE&gt;"),
 foStyle: { 
 // puts fo style attributes on the root, ex. fontSize:14px
 foStyleName: 'value', ...
 } 
}
</code></pre>

Here is list of CSS attributes that are currently supported.

<pre><code>[
 'lineHeight', 
 'alignmentBaseline', 
 'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
 'baselineShift', 
 'border',
 'borderWidth', 'borderColor','borderStyle',
 'borderTop','borderLeft','borderRight','borderBotttom',
 'borderTopWidth','borderTopStyle','borderTopColor', 
 'borderBottomWidth','borderBottomStyle','borderBottomColor',
 'borderLeftWidth','borderLeftStyle','borderLeftColor',
 'borderRightWidth','borderRightStyle','borderRightColor',
 'borderCollapse', 
 'clear', 'color', 
 'display', 'direction', 'dominantBaseline', 
 'fill', 'float', 
 'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
 'listStyleType', 'listStyleImage', 'letterSpacing', 
 'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
 'pageBreakAfter', 'pageBreakBefore', 
 'tableLayout', 
 'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 
 'verticalAlign',
 'widows', 'wordSpacing', 'width'
]
</code></pre>

Hope this helps!

blocks|key|4592906|text|试试这个npm包htmlto.It用CSS样式从html创建PDF|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4592907|var+htmlTo+=+require('htmlto')

htmlTo.pdf('./public/html/report.html','./public/pdf/report.pdf',{width:+2480,+height:+3508})|code-block|syntax|javascript|4592908|安装：|4592909|npm+install+-S+htmlto|4592910|npm+install+-S+phantom|4592911|*您还可以指定dimensions.phantom版本%5E4.0.3和节点版本v6.5.0+https://www.npmjs.com/package/htmlto|4592912|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/htmlto^0|8|6|0|0|0|0|L|0|0|M|0|19|10|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|S|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

try this npm package <code>htmlto</code>.It creates PDF from html with CSS styling

<pre><code>var htmlTo = require('htmlto')

htmlTo.pdf('./public/html/report.html','./public/pdf/report.pdf',{width: 2480, height: 3508})
</code></pre>

install:

<code>npm install -S htmlto</code>

<code>npm install -S phantom</code>

*you can also specify the dimensions.phantom version ^4.0.3 and node version v6.5.0 <a href="https://www.npmjs.com/package/htmlto" rel="nofollow noreferrer">https://www.npmjs.com/package/htmlto</a>

blocks|key|86658|text|我已经创建了一个简单易用的应用程序接口，它使用snappy库，基于PDF的CLI，以便将wkhtmltopdf页面从URL转换为PDF。这是Github存储库：https://github.com/Dellos7/dhtml2pdf|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|86659|这是一个如何在锚定标记中使用它的示例。这将在新的浏览器选项卡中显示生成的https://www.github.com站点的PDF：|style|CODE|86660|<a+href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show"+target="_blank">Show+PDF</a>|code-block|syntax|javascript|86661|如何使用它下载PDF的示例：|86662|<a+href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf">Download+PDF</a>|86663|有了这个解决方案，你甚至不需要使用javascript来生成你的PDF。|86664|但是如果你仍然需要使用javascript，你可以这样做：|86665|document.getElementById("your-button-id").addEventListener("click",+function()+{
++++var+link+=+document.createElement('a');
++++link.href+=+'https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download';
++++link.download+=+'file.pdf';
++++link.dispatchEvent(new+MouseEvent('click'));
});|86666|在代码库中，我还解释了如何非常容易地在Heroku中克隆和部署您自己的应用程序接口，这样您就可以自己管理应用程序接口，而不是依赖于外部服务。|86667|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/knplabs/snappy|1|https://wkhtmltopdf.org/|2|https://github.com/Dellos7/dhtml2pdf|3|https://www.heroku.com/home^0|N|6|0|18|B|1|28|10|2|0|10|M|0|0|0|0|0|0|0|J|6|3|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]|$A|1G|B|1H|1|1I]|$A|1J|B|1K|1|1L]]|C|$]]|$1|D|3|E|5|6|7|1M|8|@$A|1N|B|1O|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1P|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1R|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1T|8|@]|9|@]|C|$]]|$1|U|3|V|5|J|7|1U|8|@]|9|@]|C|$K|L]]|$1|W|3|X|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|Y|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|17]]|18|$5|11|12|13|C|$14|19]]|1A|$5|11|12|13|C|$14|1B]]]]

I have created a simple &amp; very easy to use API that uses the <a href="https://github.com/knplabs/snappy" rel="nofollow noreferrer">snappy</a> library, based on the <a href="https://wkhtmltopdf.org/" rel="nofollow noreferrer">wkhtmltopdf</a> webkit-based CLI, in order to convert an HTML page from the URL to PDF. Here is the Github repo: <a href="https://github.com/Dellos7/dhtml2pdf" rel="nofollow noreferrer">https://github.com/Dellos7/dhtml2pdf</a>

This is an example of how to use it from an anchor tag. This will show the generated PDF of the <code>https://www.github.com</code> site in a new browser tab:

<pre><code>&lt;a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&amp;result_type=show" target="_blank"&gt;Show PDF&lt;/a&gt;
</code></pre>

Example of how to use it to download the PDF:

<pre><code>&lt;a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&amp;result_type=download&amp;file_name=my_pdf"&gt;Download PDF&lt;/a&gt;
</code></pre>

With this solution you don't even need to use javascript in order to generate your PDF.

But if you still need to do it using javascript, you can do it like this:

<pre><code>document.getElementById("your-button-id").addEventListener("click", function() {
 var link = document.createElement('a');
 link.href = 'https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&amp;result_type=download';
 link.download = 'file.pdf';
 link.dispatchEvent(new MouseEvent('click'));
});
</code></pre>

In the repo I also explain how to very easily clone &amp; deploy your own API in <a href="https://www.heroku.com/home" rel="nofollow noreferrer">Heroku</a> so you can mantain the API yourself and not to depend on external services.

I'm looking for a library to transform my web page into a PDF file after click event from a button. 
I'm trying <code>jspdf</code>, but it prints without the CSS, how can I make this using <code>JavaScript/jQuery</code> and keep my CSS? Or another CSS that I can choose?

How to generate a pdf from html web page?

容器

jQuery

GitHub

我正在寻找一个库来转换我的网页后，从一个按钮点击事件为PDF文件。我正在尝试jspdf，但它打印没有CSS，我如何使用JavaScript/jQuery并保留我的CSS？或者另一个我可以选择的CSS？

问如何从html网页生成pdf？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从html网页生成pdf？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从html网页生成pdf？
EN