jsPDF не может заставить работать любой стиль
Я новичок в использовании jsPDF, но, как ни крути, я не могу заставить себя применить эту штуку! Я пробовал встроенный, внутренний и внешний все безрезультатно! В другом посте я прочитал, что, поскольку он технически печатает материал в файл, мне нужна таблица стилей печати, и это тоже не сработало.
У меня есть очень простая страница, с которой я пытаюсь заставить работать любой 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>
3 ответа
Я думаю, что проблема в том, что вы используете 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, но думаю, что они не поддерживают 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'); в вашем сценарии.
Вы можете попробовать эту опцию, которая использует библиотеки jsPDF, html2canvas и html2pdf
от его README:
включить эти файлы:
<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' }
});
Вы можете сделать снимок экрана с помощью jsPDF, но вам также понадобится html2canvas. Используйте html2canvas, чтобы преобразовать html в canvas и захватить содержимое изображения. Создайте пустой PDF-файл с помощью jsPDF, добавьте содержимое 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, но качество немного пострадает (размыто).
@samuraiseoul Мы можем сделать сложный рендеринг HTML с domtoimage
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.
}
}