![](/img/trans.png)
[英]Converting a div with attribute “hidden” to pdf with jsPDF and html2canvas
[英]html2canvas - is there to print a hidden DIV to pdf?
背景
我有一個記錄表,它使用“制表符”控件來允許用戶排序、過濾等。一旦他們在表中獲得了他們想要的結果,我需要為用戶提供一種方法來觸發每行創建一個 PDF,使用 PDF 模板。 在頁面頂部,我有一個下拉菜單,他們可以在其中選擇模板。 例如,它將有如下選項:
等等。
我知道怎么做: 1. 我知道如何在 jquery 2. 我知道如何創建一個基本的 jsPDF 文檔。 3.“模板”機制將只是網頁中預定義的兩種不同。 根據他們在下拉列表中選擇的選項,我可以確定要包含哪個徽標。
問題
似乎除非將包含在 PDF 中的 DIV 可見,否則 html2canvas 將無法工作。
到目前為止,這是我一直在玩的原型代碼:(除了我試圖 PDF 的 DIV 顯示在屏幕上的事實之外,其他一切都有效。)
<div id="bluetemplate" class="ug_logo_style" style="display: none">
<img class="bluelogo"></img>
</div>
<div id="pinktemplate" class="ug_logo_style" style="display: none">
<img class="pinklogo"></img>
</div>
$("#templatedropdown").change(function(){
var selectedtemplate = this.value;
switch (selectedtemplate){
case 'blue':
$("div#bluetemplate").show();
$("div#pinktemplate").hide();
break;
case 'pink':
$("div#pinktemplate").show();
$("div#bluetemplate").hide();
break;
}
});
$("#btntemplate").click(function(){
switch($('#template option:selected').val()){
case 'blue':
var imgData;
html2canvas($("#bluetemplate"), {
useCORS: true,
onrendered: function (canvas) {
imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF({
orientation: 'landscape',
unit:'pt',
format:[400,200]});
doc.addImage(imgData, 'PNG', 10, 10);
doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
doc.text(registrant.email, 10, 120);
doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
window.open(imgData);
}
});
break;
case 'pink':
var imgData;
html2canvas($("#pinktemplate"), {
useCORS: true,
onrendered: function (canvas) {
imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF({
orientation: 'landscape',
unit:'pt',
format:[400,200]});
doc.addImage(imgData, 'PNG', 10, 10);
doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
doc.text(registrant.email, 10, 120);
doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
window.open(imgData);
}
});
break;
}
您可以做的是暫時顯示隱藏的div,將其轉換為pdf,然后再次將其隱藏。 盡管僅在瞬間顯示徽標是可以接受的,但這只是一種解決方法。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
function download() {
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.setProperties({
title: 'jsPDF sample'
}); // used for window.open() only
let bluetemplate = document.getElementById('bluetemplate');
bluetemplate.style.display = '';
pdf.html(document.body, {
callback: function () {
//pdf.save('test.pdf');
window.open(pdf.output('bloburl')); // to debug
bluetemplate.style.display = 'none';
}
});
}
</script>
您是否嘗試過將此添加到CSS
.html2canvas-container { width: 3000px !important; height: 3000px !important; }
請參閱此處以了解與打印不可見內容有關的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.