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

小编典典

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

html

我做了一个语法荧光笔，我希望有一个选项另存为PDF。我已经看了这个SO问题，但是下载它并不能保留CSS样式，这会破坏下载突出显示的文件的意义。有什么方法可以pre在维护CSS的同时将元素另存为PDF？

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。

阅读 452

2020-05-10

共1个答案

小编典典

尝试打开新的window，追加pre html，style如果任何的pre元素，以新颖window
document.body，呼吁.focus()，.print()在新的window; 选择系统打印对话框，选择“打印到文件”

$("#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,
  // e.g., `<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();
});

2020-05-10