我是新手使用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>
答案 0 :(得分:21)
我认为问题在于你使用的是 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');
下。
答案 1 :(得分:1)
您可以尝试使用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' }
});
答案 2 :(得分:0)
您可以使用jsPDF捕获屏幕截图,但您也需要html2canvas。使用html2canvas将html转换为canvas并获取图像内容。使用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 :(得分:0)
@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.
}
}