如何在jsPDF庫中啓用UTF-8

我很高興使用jsPDF庫，它可以幫助我將我的HTML頁面導出爲PDF文件。我遇到了一些困難。我從http://parall.ax/products/jspdf/下載了該庫。當我使用一些字符如š，ć（UTF-8）時，它們看起來像是錯誤。即使我通過doc.text插入。在圖書館的網站上，當我使用他們的例子並使用其中的一些字符來改變文本時 - 它可以工作。所以它假設使用UTF-8。爲什麼它不能在我的電腦上工作。如何在jsPDF庫中啓用UTF-8

我向您提供我的代碼。所有在這裏丟失的是lib（可以從網站上下載），你會看到我的問題。爲什麼CSS在pdf中消失了？

testing.html

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TESTING JSPDF LIB</title> 
<script type="text/javascript" src="pdffile.js" charset="utf-8"></script> 
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="jspdf/jspdf.js"></script> 
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script> 
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script> 
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script> 
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script> 
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script> 
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script> 
<script> 
function redirect() { 
    document.write("Hello world" + '<br />'); 
} 
</script> 
</head> 

<body> 
<div id="box" class="box-shadow"> 
    <input type="submit" name="ok" id="ok" value="LETS TRY" onClick="redirect();pdf();" /> </div> 
</div> 
</body> 
</html>

pdffile.js

function pdf() { 
document.write('<div id="mydiv" style="background-color:#CCC; width:780px;640px;"><p>Open these letters š and c in PDF file and see error</p></div><br />'); 
document.write('<button id="export">OPEN IN PDF FILE</button>'); 

$(function() { 
    var doc = new jsPDF(); 
    doc.text(35, 25, "Text with the letter Š"); 
    var specialElementHandlers = { 
     'body': function (element, renderer) { 
      return true; 
     } 
    }; 
    $('#export').click(function() { 
     doc.fromHTML($('#mydiv').html(), 15, 15, { 
      'width': 170, 
       'elementHandlers': specialElementHandlers 
     }); 
     doc.save('sample-file.pdf'); 
    }); 
}); 
}

來源

2014-02-21 mpavlovic89

您確定您的html/javascript文件是以UTF-8編碼/格式保存的嗎？ – Hardy

根據jsPDF團隊他們不會支持它..你可以跟蹤狀態https://github.com/MrRio/jsPDF/issues/12 –

是的，我確定。它在瀏覽器中顯示這些字符，但不能以PDF格式顯示。 :( – mpavlovic89

jsPDF依然不支持UTF-8。雖然看起來pdfmake.org支持UTF-8。嘗試使用their playground，並用自己的文字測試：

來源

2014-09-24 15:13:22

爲真。但pdfmake不支持ie。 – Saulius

@Saulius，它現在:) –

截至2015年，jsPDF不支持UTF-8正常，解決方法是使用html2canvas呈現JPG或PNG，並把它添加到PDF文件。您可以使用下面的代碼片段，以得到一個想法：

var doc = new jsPDF(); 

var utf_8_string_to_render = 'any_value_you_want'; 

Promise.all(
[ 
    new Promise(function (resolve) 
    { 
     var temp = document.createElement("div"); 
     temp.id = "temp"; 
     temp.style = "color: black;margin:0px;font-size:20px;"; 
     phrase = utf_8_string_to_render; 
     temp.innerHTML= phrase; 
     //need to render element, otherwise it won't be displayed 
     document.body.appendChild(temp); 

     html2canvas($("#temp"), { 
     onrendered: function(canvas) { 

       $("#temp").remove(); 
      resolve(canvas.toDataURL('image/png')); 
     }, 
     }); 
    }) 
]).then(function (ru_text) { 

    doc.addImage(ru_text[0], 'JPEG', 0,0); 
    doc.text(0, 10, 'Non-utf-8-string'); 

    doc.save('filename.pdf'); 
    }); 


};

那些支持UTF-8編碼的另一個庫：

PDFKit，其被報道讓你適當的位置座標爲您的文本。
PDFMake，它正確呈現UTF-8字符，但不允許您定位文本，除了使用邊距進行樣式設置。

來源

2016-04-27 16:03:20

如何在jsPDF庫中啓用UTF-8

回答

相關問題