jsPDF 无法使用任何样式
Posted
技术标签:
【中文标题】jsPDF 无法使用任何样式【英文标题】：jsPDF can't get any styling to work 【发布时间】：2013-12-25 22:29:46 【问题描述】：我是使用 jsPDF 的新手，但在我的一生中，我无法将任何 css 应用到这个东西上！我试过内联、内部和外部都无济于事！我在另一篇 SO 帖子中读到，由于它在技术上将内容打印到文件中，因此我需要一个打印样式表，但这也不起作用。
我有一个非常基本的页面，我只是想让任何 CSS 都可以使用： JS：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(document).ready(function()
$('#dl').click(function()
var specialElementHandlers =
'#editor': function(element, renderer)
return true;
;
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, 'width': 170, 'elementHandlers': specialElementHandlers);
doc.output('save');
);
);
</script>
HTML：
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
最后是外部样式表：
h1
color: red;
div
color: red;
我确定所有内容都正确包含在内，并且没有错误，已经检查了所有内容。是否需要调用一些额外的函数才能使 css 也能正常工作？请告诉我！非常感谢！您可能拥有的任何其他提示也将不胜感激！
编辑： 这是确切的网页：
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(document).ready(function()
$('#dl').click(function()
var specialElementHandlers =
'#editor': function(element, renderer)
return true;
;
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, 'width': 170, 'elementHandlers': specialElementHandlers);
doc.output('save');
);
);
</script>
</head>
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
</html>
【问题讨论】：
您的控制台是否出现任何错误？ IE。 - 您的所有资源都正确加载了吗？ .我问的原因是，在我的开发人员环境中：“//ajax.googleapis.com”给我带来了麻烦，而“h t t p : //ajax.googleapis.com”却没有。至此：你能告诉我更多关于你的开发堆栈的信息吗？页面如何呈现 WAMP、MAMP、RoRails、Node？不知道这是否太重要了，但谁知道——我希望看到这个问题得到回答。 一切都在加载，只是一个简单的 .html 文件， 我认为我们需要您的所有代码，或者您可以将其上传到某个地方？因为当我使用您提供的代码时，样式效果很好。 添加了完整的网页，几乎没有什么不同。 【参考方案1】：我认为问题在于您使用media="print" 而不是media="screen"。
尝试制作两个单独的文件，一个用于打印，一个用于屏幕：
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
屏幕将包含在浏览器中看到的页面样式。打印页面将包含您打印页面时的样式，或者在这种情况下将其保存为 PDF。
编辑
我检查了jsPDF website，但我认为它们不支持 CSS。不过，您可以执行以下操作来创建具有不同文本颜色的文档：
doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');
将此代码放在脚本中var doc = new jsPDF('landscape'); 的正下方。
【讨论】：
我刚试过这个，虽然它可以正常设置页面的样式，但当我将它保存为 pdf 时，我仍然无法让它为 pdf 设置样式。 :( 我认为他们不支持 CSS，请查看我更新的答案。 好吧，如果我不能应用 CSS，JSPDF 对我来说毫无用处，你知道有哪些库可以让我拍摄 DOM 的子集吗？图片还是PDF？如果我可以通过 Id 捕获 dom 的子元素，则格式不是很重要！ @Samuraisoulification 不在客户端，但 CasperJS 可以在服务器端截取页面 (docs.casperjs.org/en/latest/modules/casper.html#captureselector) 上的特定元素。 @Samuraisoulification 您可以使用类似html2canvas.hertzen.com 的方式截取屏幕截图然后打印。【参考方案2】：您可以使用 jsPDF 截取屏幕截图，但您也需要 html2canvas。使用 html2canvas 将 html 转换为画布并抓取图像内容。用jsPDF创建一个空的pdf并将html图片内容添加到pdf中并保存：
html2canvas(*html*,
onrendered: function(canvas)
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jsPDF()
pdf.addImage(contentDataURL, 'JPEG', 20, 20)
pdf.save('form.pdf')
)
这将保留所有 CSS，但质量会受到一点影响（模糊）。
【讨论】：
【参考方案3】：您可以尝试使用 jsPDF、html2canvas 和 html2pdf 库的this 选项
来自其自述文件：
包含这些文件：
<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>
然后你可以通过运行生成你的pdf：
html2pdf($('body').get(0),
margin: 1,
filename: 'myfile.pdf',
image: type: 'jpeg', quality: 0.98 ,
html2canvas: dpi: 192, letterRendering: true ,
jsPDF: unit: 'in', format: 'letter', orientation: 'portrait'
);
【讨论】：
【参考方案4】：@samuraiseoul 我们可以用domtoimage做复杂的HTML渲染
private async generatePDF(elemToPrint: HTMLElement): Promise<void>
this.printSection = document.createElement('div');
this.printSection.id = 'printSection';
document.body.appendChild(this.printSection);
const dataUrl = await domtoimage.toPng(elemToPrint, width: elemToPrint.clientWidth, height: elemToPrint.clientHeight);
const img = document.createElement('img');
img.src = dataUrl;
img.alt = 'The Image';
this.printSection.appendChild(img);
setTimeout(() => window.print(), 500); //Just give some time to render stuff while playing with @media print css stuff
这里是 CSS
@media screen
#printSection
display: none;
@media print
#printSection , #printSection *
display: block; // We need the * because only if we display all the items inside the printSection to display as block. then only our mighty firefox will render the second page. :) Hey, that's a bug from FF.
【讨论】：
以上是关于jsPDF 无法使用任何样式的主要内容，如果未能解决你的问题，请参考以下文章
我无法使用 NativeScript 在 jsPDF 中渲染图像
为什么jsPDF无法在我的角度应用程序中保存带有内部地图的Div？