使用CSS将前置元素保存为PDF

我做了一个语法荧光笔 ，我想要一个选项来保存为PDF。 我已经看过这个问题 ，但是下载它并不能保留CSS样式，这会破坏下载突出显示的文件的要点。 有没有一种方法可以保存我的pre元素作为PDF，同时保持CSS？

HTML：

 <pre id='output'> (highlighted portion) </pre> <button id='save'>Save as PDF</button> 

JS：

 $('#save').click(function(){ //this is what I need help with }); 

正如你可能已经注意到，我使用jQuery，如果这很重要。

Answer 1

尝试打开新window ，将pre html ， style （如果有的话）添加到新window document.body ，在新window调用.focus() ; select系统打印对话框，select“打印到文件”

 $("#save").click(function() { var text = $("#output")[0].outerHTML; // `styles`: `style` element; // or `String` "<style>.light{color:#0af;}</style>" ; // alternatively , add `style` attribute to `pre` element directly, // eg, `<pre style="color:#0af;">` var styles = $("style")[0].outerHTML; var popup = window.open("", "popup"); // append `text`:`pre` element `styles`:`style` element // at `popup` `document.body` popup.document.body.innerHTML = text + styles; popup.focus(); popup.print(); }); 

jsfiddle http://jsfiddle.net/tn04Ldka/2/