#html #image #pdf #asp-classic #jspdf
#HTML #изображение #PDF #asp-классический #jspdf
Вопрос:
В настоящее время я работаю над проектом на asp classic, jquery и html
Недавно я успешно конвертировал html-файл в PDF с помощью «from-html.js «, но у меня есть один вопрос, который:
Как я могу вставить некоторые изображения в созданный мной PDF-файл? я долго искал и не нахожу способа это сделать.
Я пытался использовать addhtml.js или addimage.js перепутано с моим реальным кодом, но это не работает. вот что я сейчас сделал
<title>Recapitulatif Commande</title>
<script type="text/javascript" src="./examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./dist/jspdf.min.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.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.addimage.js"></script>
<script src='./libs/Blob.js/Blob.js' type='text/javascript'></script>
<script src='./libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
<script src='./libs/png_support/zlib.js' type='text/javascript'></script>
<script src='./libs/png_support/png.js' type='text/javascript'></script>
<script src='./libs/deflate.js' type='text/javascript'></script>
<script src='jspdf.plugin.png_support.js' type='text/javascript'></script>
<script language="JavaScript">
$(document).ready( function(){
var doc = new jsPDF();
var specialElementHandlers =
{
'#editor': function (element, renderer)
{
return true;
}
};
$('#cmd').click(function ()
{
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers,
});
doc.save('RecapCommande.pdf');
});
});
</script>
<div id="mydiv">
<h2><center>Bonjour voici un recap des notes</center></h2>
<table id="table" width="100%" border="2px solid">
<thead>
<tr>
<th width="33%" align="center">date : </th>
<th width="33%" align="center">montant : </th>
<th width="33%" align="center">statut : </th>
</tr>
</thead>
</table>
</div> <!-- /container -->
<table id="table14" width="100%" >
<thead>
<tr>
<th width="33%" align="center"><button id="cmd" align="center" >Imprimer votre commande</button></th>
</tr>
</thead>
</table>
Если вы можете мне помочь, я был бы очень рад, спасибо
Ответ №1:
вам нужно будет преобразовать вашу таблицу в холст, а затем отобразить ее.Сначала прикрепите скрытый холст к вашему div. Затем скопируйте ваш div в скрытый холст.В-третьих, скройте вашу таблицу и покажите холст. в-четвертых, создайте pdf.
<Script>
//first
$("#table").append('<div id="can" style="background-color:white" >
<canvas id="canvas" width="300" height="320" style="background-color:white"></canvas> </div>');
//second
canvg('canvas', $("#table").html());
//third
var im = document.getElementById('canvas');
im.style.display = 'block';
var create = document.getElementById('table');
create.style.display = 'none';
//fourth..call function for pdf generation
</Script>
Ответ №2:
Закодируйте свои изображения в base64 и вставьте большой двоичный объект данных в область src img … т.е.:
<img src="data:image/jpeg;base64,/9j/4AA......9k=" />
Я знаю, что это старый пост, однако сегодня я занимался этой проблемой и обнаружил, что изображения base64 — это единственный способ их вывода при преобразовании HTML в PDF.