使用jspdf时转换/规范化特殊字符 [英] convert/normalize special characters when using jspdf
问题描述
尝试使用 jspdf lib @ 1.4.1 将文本转换为pdf，有时输出变得如此丑陋和难以理解，因为文本包含一些特殊字符，例如：
左侧单引号 U + 2018 ，或右边 U + 2019 ，或→等符号，或 ı in Kadıköy ...
如何清理/规范化此类文本？或者是否有任何选项是jspdf我可以用来解决这个问题？
更新：
重现问题，只需在此示例中使用此字符串：'→Kadıköy' https://parall.ax/products/jspdf ，第9行，您将看到箭头转换为！'和ı转换为 1
（仅供参考，Kadıköy是一个城市名称 https://en.wikipedia .org / wiki / Kad％C4％B1k％C3％B6y ）
我们可以阅读 此处 ：
jsPDF通过能够使用自定义字体最终支持UTF-8。
问题是什么你有的是你并没有真正意识到PDF是如何工作的。它必须有一些可以显示正确字母的字体。它必须是一个系统字体（对于PDF阅读器）或嵌入字体。对于每一个单字母，PDF必须有一个正确的字体。 在这种情况下，对于同一PDF中新语言的每个单词，您必须设置正确的字体。
一些 TTF字体是为某些特定字母创建的，但并非所有TTF都已正确创建，因为这背后是 一种标准技术 。 也不是为某些特定字母创建的所有TTF字体都可以在PDF 中显示它们。例如，我在互联网上发现的字体梵文支持所有印地文字母，但它已完全失败。
此外，我们必须找到正确的TTF字体。我发现了它们 - 在你的情况下，字符串'→Kadıköy'你可以使用Courier New或Arial Unicode MS。
我搜索了您的任务中的每个字母都找到了以下列表：
ö - 字体支持带有分音符的拉丁文小写字母o（u + 00F6）
世界上大多数语言的解决方案
我创建的应用程序可以为世界上大多数语言创建PDF。 / p>
如何使用它：
- 首先下载并提取免费的TTF字体 Arial Unicode MS
- 启动下面的代码段并从您的文件夹中选择提取的免费TTF字体Arial Unicode MS。
- 将文字写入您的语言并单击创建PDF按钮。
- PDF将被下载，您可以打开它。
在某些情况下，TTF字体Arial Unicode MS可能不支持您的语言。您可以找到支持的语言的完整列表 此处 即可。在这种情况下，您必须从正确的TTF字体中找到一个。 但要小心： 如果字体低于100 kb。我有与jsPDF不兼容的经验（请参阅我的帖子的开头）。
应用程序
var fontInBase64 =''，fileName =''，message = document.querySelector（' div'），txtForPdf = document.querySelector（'textarea'），errorStr ='< b style =color：red>请选择一个字体文件！< / b>'; function readFile（）{var file = document.querySelector（'input [type = file]'）。files [0]，reader = new FileReader（）; if（file&&& file.name.split（'。'）[1] .toLowerCase（）！='ttf'）{message.innerHTML = errorStr;返回; } if（txtForPdf.value.replace（/ \ s + / g，''）。length< 1）{message.innerHTML ='< b style =color：red>请写一些文字！< / b个';;返回; } reader.onloadend = function（）{fontInBase64 = reader.result.split（'，'）[1]; fileName = file.name.replace（/ \s + / g，' - '）; createPDF（fileName，fontInBase64）; } if（file）reader.readAsDataURL（file）; else message.innerHTML = errorStr;} function createPDF（fileName，fontInBase64）{var doc = new jsPDF（'p'，'mm'，'a4'）; fileNameWithoutExtension = fileName.split（'。'）[0]，lMargin = 15，//左边距mm rMargin = 15，//右边距mm pdfInMM = 210; // mm的宽度mm mm.addFileToVFS（fileName，fontInBase64）; doc.addFont（fileName，fileNameWithoutExtension，'normal'）; doc.setFont（fileNameWithoutExtension）; doc.setFontSize（14）; var splitParts = doc.splitTextToSize（txtForPdf.value，（pdfInMM - lMargin - rMargin））; doc.text（15,15，splitParts）; doc.save（ '检验.pdf'）;}函数setHindiToTextArea（）{txtForPdf.value =हिन्दीविश्वकीएकप्रमुखभाषाहैएवंभारतकीराजभाषाहैकेंद्रीयस्तरपरभारतमेंदूसरीआधिकारिकभाषाअंग्रेजीहैयहहिन्दुस्तानीभाषाकी。 एकमानकीकृतरूपहैजिसमेंसंस्कृतकेतत्समतथातद्भवशब्दकाप्रयोगअधिकहैंऔरअरबी-फ़ारसीशब्दकमहैं。हिन्दीसंवैधानिकरूपसेभारतकीप्रथमराजभाषाऔरभारतकीसबसेअधिकबोलीऔरसमझीजानेवालीभाषाहै。हालां ि，हिन्दीभारतकीराष्ट्रभाषानहींहैक्योंकिभारतकासंविधानमेंकोईभीभाषाकोऐसादर्जानहींदियागयाथा。चीनीकेबादयहविश्वमेंसबसेअधिकबोलीजानेवालीभाषाभीहै。विश्वआर्थिकमंचकीगणनाकेअनुसारयहविश्वकीदस शक्तिशालीभाषाओंमेंसेएकहै。हिन्दीऔरइसकीबोलियाँसम्पूर्णभारतकेविविधराज्योंमेंबोलीजातीहैं。भारतऔरअन्यदेशोंमेंभीलोगहिन्दीबोलते，पढ़तेऔरलिखतेहै 。फ़िजी，मॉरिशस，गयाना，सूरीनामकीऔरनेपालकीजनताभीहिन्दीबोलतीहै。2001कीभारतीयजनगणनामेंभारतमें42करोड़20लाखलोगोंनेहिन्दीकोअपनीमूलभाषाबताया。भारतकेबाहर，हिन्दीबोलनेवालेसंयुक्तराज्यअमेरिकामें648983 ;这是一处6,85,170; दक्षिणणफ्रीकामें8,9 0,2 9 2; यमनमें2,32,760; युगांडामें1,47,000; 5,000,000 ;;;;;;;;;;;;;;;;;;;;;;;;;;; नेपालमें8लाख; जर्मनी在30,000हैं。 न्यूजीलैंडमेंहिन्दीचौथीसर्वाधिकबोलीजानेवालीभाषाहै;}
< script src =https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js\"rossorigin =anonymous>< / script>< input type = fileonchange =message.innerHTML ='& nbsp;'>< br>< br>< textarea rows =4cols =75>'→Kadıköy'< / textarea> ;< div>& nbsp;< / div>< input type =buttonvalue =使用UTF支持创建PDFonclick =readFile（）>< br>< i>例如< ; / i>：< br>< a href =＃onclick =setHindiToTextArea（）>< b>如果您不想将印地文文本设置为textarea，请单击此行。< / b> < / a>
Trying to use the jspdf lib @1.4.1 to convert text to pdf, the output sometimes gets so ugly and unreadable, because the text contains some special characters, like:
the left single quotation mark U+2018, or the right one U+2019, or symbols like →, or the ı in Kadıköy...
how can i sanitize/normalize such texts? or is there any option is jspdf that i can use to fix this problem?
update:
to reproduce the problem, just use this string: '→Kadıköy' in this example https://parall.ax/products/jspdf , line 9, you will see that the arrow is converted to !’ and the ı is converted to 1
(FYI, Kadıköy is name of a city https://en.wikipedia.org/wiki/Kad%C4%B1k%C3%B6y)
We can read here:
jsPDF supports finally UTF-8 by having the ability to use custom fonts.
The problem which you have is that you do not really realize how the PDF works. It must have some font which can display correct letters. It must be one system font (for PDF reader) or embeded font. And for each one single letter the PDF have to have one correct font. In this case for each word in new language in the same PDF you have to set the correct font.
Some TTF fonts was created for some specific letters, but not all TTFs was correctly created because behind this is one standard technology. Also not all of TTF fonts which was created for some specific letters can display them in PDF. For example font "Devanagari" which I have found in internet schould support all hindi letters, but it has failed fully.
Also we have to find the correct TTF fonts. And I found them - in your case for the string "‘→Kadıköy’" you could use "Courier New" or "Arial Unicode MS".
I have searched for each letter from your task and have found following lists:
→ – Font support for "Rightwards arrow" (u+2192)
ı – Font support for "Latin small letter dotless I" (u+0131)
‘ – Font support for "Left single quotation mark" (u+2018)
’ – Font support for "Right single quotation mark" (u+2019)
ö – Font support for "Latin small letter o with diaeresis'" (u+00F6)
Solution for most languages of the world
I have created the application which can create PDFs for most of languages in the world.
How to use it:
- At first download and extract free TTF font "Arial Unicode MS"
- Start the snippet below and choose the extracted free TTF font "Arial Unicode MS" from your folder.
- Write the text in your language and click on "Create PDF" button.
- The PDF will be downloaded and you could open it.
In some cases it could be that your language is not supported in TTF font "Arial Unicode MS". The full list of supported languages you can find here. In this case you have to find one from the correct TTF font. But be careful: if the font is under 100 kb. I have the expirience that does not work with jsPDF (see the beginning of my post).
The application
var fontInBase64 = '',
fileName = '',
message = document.querySelector('div'),
txtForPdf = document.querySelector('textarea'),
errorStr = '<b style="color:red">Please select a font file!</b>';
function readFile()
{
var file = document.querySelector('input[type=file]').files[0],
reader = new FileReader();
if(file && file.name.split('.')[1].toLowerCase() != 'ttf')
{
message.innerHTML = errorStr;
return;
}
if(txtForPdf.value.replace(/\s+/g, '').length < 1)
{
message.innerHTML = '<b style="color:red">Please write some Text!</b>';;
return;
}
reader.onloadend = function()
{
fontInBase64 = reader.result.split(',')[1];
fileName = file.name.replace(/\s+/g, '-');
createPDF(fileName, fontInBase64);
}
if(file) reader.readAsDataURL(file);
else message.innerHTML = errorStr;
}
function createPDF(fileName, fontInBase64)
{
var doc = new jsPDF('p','mm','a4');
fileNameWithoutExtension = fileName.split('.')[0],
lMargin = 15, // left margin in mm
rMargin = 15, // right margin in mm
pdfInMM = 210; // width of A4 in mm
doc.addFileToVFS(fileName, fontInBase64);
doc.addFont(fileName, fileNameWithoutExtension, 'normal');
doc.setFont(fileNameWithoutExtension);
doc.setFontSize(14);
var splitParts = doc.splitTextToSize(txtForPdf.value, (pdfInMM - lMargin - rMargin));
doc.text(15, 15, splitParts);
doc.save('test.pdf');
}
function setHindiToTextArea()
{
txtForPdf.value =
"हिन्दी विश्व की एक प्रमुख भाषा है एवं भारत की राजभाषा है। केंद्रीय स्तर पर भारत में दूसरी आधिकारिक भाषा अंग्रेजी है। यह हिन्दुस्तानी भाषा की एक मानकीकृत रूप है जिसमें संस्कृत के तत्सम तथा तद्भव शब्द का प्रयोग अधिक हैं और अरबी-फ़ारसी शब्द कम हैं। हिन्दी संवैधानिक रूप से भारत की प्रथम राजभाषा और भारत की सबसे अधिक बोली और समझी जाने वाली भाषा है। हालांकि, हिन्दी भारत की राष्ट्रभाषा नहीं है क्योंकि भारत का संविधान में कोई भी भाषा को ऐसा दर्जा नहीं दिया गया था। चीनी के बाद यह विश्व में सबसे अधिक बोली जाने वाली भाषा भी है। विश्व आर्थिक मंच की गणना के अनुसार यह विश्व की दस शक्तिशाली भाषाओं में से एक है। हिन्दी और इसकी बोलियाँ सम्पूर्ण भारत के विविध राज्यों में बोली जाती हैं। भारत और अन्य देशों में भी लोग हिन्दी बोलते, पढ़ते और लिखते हैं। फ़िजी, मॉरिशस, गयाना, सूरीनाम की और नेपाल की जनता भी हिन्दी बोलती है। 2001 की भारतीय जनगणना में भारत में ४२ करोड़ २० लाख लोगों ने हिन्दी को अपनी मूल भाषा बताया। भारत के बाहर, हिन्दी बोलने वाले संयुक्त राज्य अमेरिका में 648,983; मॉरीशस में ६,८५,१७०; दक्षिण अफ्रीका में ८,९०,२९२; यमन में २,३२,७६०; युगांडा में १,४७,०००; सिंगापुर में ५,०००; नेपाल में ८ लाख; जर्मनी में ३०,००० हैं। न्यूजीलैंड में हिन्दी चौथी सर्वाधिक बोली जाने वाली भाषा है";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<input type="file" onchange="message.innerHTML=' '"><br><br>
<textarea rows="4" cols="75">‘→Kadıköy’</textarea>
<div> </div>
<input type="button" value="Create PDF with UTF support" onclick="readFile()">
<br>
<i>For example</i>:<br><a href="#" onclick="setHindiToTextArea()"><b>Click on this line if you wont to set hindi text to the textarea.</b></a>
这篇关于使用jspdf时转换/规范化特殊字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
