TableTools Turkish Character Fix (May help UTF-8 Problems)

241

Hello all,

Today I managed to fix Turkish character problems for tabletools Excel and PDF export feature.

The main problem is starting from AlivePDF's source code.
1- Download AlivePDF 0.1.5 RC.zip from https://code.google.com/p/alivepdf/downloads/list . Extract the src folder to c:\AlivePDF>src folder

2- Than browse to the C:\AlivePDF\src\org\alivepdf\pdf. You will see PDF.as file there. Open it with text editor and find this line.
[code]buffer.writeMultiByte( content+"\n", "windows-1252" ); [/code]

3- So every char becomes windows-1252 chacters which doesn't have UTF8 characters. To fix this problem locally, I had replaced the line with:
[code]buffer.writeMultiByte( content+"\n", "windows-1254" ); [/code]
windows-1254 can be used for Turkish Character encodings. (You can change it to your local language's charset)

4- After replacing the code, you need to generate swc file to use with tabletools. For generating swc file, you need flex SDK. You can download it from here: http://www.adobe.com/devnet/flex/flex-sdk-download.html

5- Extract the SDK to the C:\flex_sdk_4.6

5- Open the cmd as administrator and write this command:

[code]c:\flex_sdk_4.6\bin\compc -source-path c:\alivepdf\src -include-sources C:\AlivePDF\src\org\alivepdf\pdf -optimize -output C:\AlivePDF\AlivePDF.swc[/code]

You will have new generated swc file under c:\AlivePDF\AlivePDF.swc

6- Now copy the AlivePDF.swc file to C:\flex_sdk_4.6\frameworks\libs folder.

7- Find a suitable font that supports your characters. I tried Times New Roman but it was 800 kB~ so the SWF file became 500 kB+ I used Arial Narrow. Copy the font file to C:\flex_sdk_4.6\bin
For example I copied arial.ttf from Windows\Fonts folder.

8- Convert ttf file to afm with this website: http://everythingfonts.com/ttf-to-afm
Download the afm file to C:\flex_sdk_4.6\bin as arial.afm

9- We will embed this new font to use it with datatables. So we will have new character support.
Download https://github.com/DataTables/TableTools/blob/master/media/as3/ZeroClipboardPdf.as file and rename it to ZeroClipboard.as and copy this file to C:\flex_sdk_4.6\bin again.

9- Open the as file with text editor and add this code block under new variable definitions.


[code]
import org.alivepdf.fonts.CodePage;
import org.alivepdf.fonts.EmbeddedFont;

[Embed( source="/arial.ttf", mimeType="application/octet-stream" )]
private var fontStream:Class;
[Embed( source="/arial.afm", mimeType="application/octet-stream" )]
private var afmStream:Class;
[/code]

It should be like:
[code]
/* PDF imports */
import org.alivepdf.pdf.PDF;
import org.alivepdf.data.Grid;
import org.alivepdf.data.GridColumn;
import org.alivepdf.layout.Orientation;
import org.alivepdf.layout.Size;
import org.alivepdf.layout.Unit;
import org.alivepdf.display.Display;
import org.alivepdf.saving.Method;
import org.alivepdf.fonts.FontFamily;
import org.alivepdf.fonts.CoreFont;
import org.alivepdf.fonts.CodePage;
import org.alivepdf.fonts.EmbeddedFont;
import org.alivepdf.colors.RGBColor;


public class ZeroClipboard extends Sprite {

private var domId:String = '';
private var button:Sprite;
private var clipText:String = 'blank';
private var fileName:String = '';
private var action:String = 'copy';
private var incBom:Boolean = true;
private var charSet:String = 'utf8';

[Embed( source="/arial.ttf", mimeType="application/octet-stream" )]
private var fontStream:Class;
[Embed( source="/arial.afm", mimeType="application/octet-stream" )]
private var afmStream:Class;
[/code]

10- Find /* Create the PDF */ section.
Add this line upper side of it.
[code]
var ef:EmbeddedFont = new EmbeddedFont( new fontStream(), new afmStream(), CodePage.CP1254 );
[/code]

You can change the CodePage to your local language charset.

Under the comment add this line also.
[code]pdf.setFont( ef, 13 ); [/code]

It should be like:
[code] var ef:EmbeddedFont = new EmbeddedFont( new fontStream(), new afmStream(), CodePage.CP1254 );

/* Create the PDF */
pdf = new PDF( Orientation[orientation.toUpperCase()], Unit.MM, Size[size.toUpperCase()] );
pdf.setFont( ef, 13 );
pdf.setDisplayMode( Display.FULL_WIDTH );
pdf.addPage();
iPageWidth = pdf.getCurrentPage().w-20;
pdf.textStyle( new RGBColor(0), 1 );
[/code]

11- In my case,
[code] import org.alivepdf.fonts.Style; [/code] was not identified by the compiler. So I removed it.

[code]
/* Add the title / message if there is one */
pdf.setFont( new CoreFont(FontFamily.HELVETICA), 14 );
if ( title != "" )
{
pdf.writeText(11, title+"\n");
}

pdf.setFont( new CoreFont(FontFamily.HELVETICA), 11 );
if ( message != "" )
{
pdf.writeText(11, message+"\n");
}
[/code]

replaced the part with:

[code]
/* Add the title / message if there is one */
pdf.setFont( ef, 13 );
if ( title != "" )
{
pdf.writeText(11, title+"\n");
}

pdf.setFont( ef, 11 );
if ( message != "" )
{
pdf.writeText(11, message+"\n");
}
[/code]


__________________________________________________
Here is my updated files:
http://www.mediafire.com/download/9cp1xbcead1i3j6/arial.afm
http://www.mediafire.com/download/m7h2brh40ken247/arial.ttf
http://www.mediafire.com/download/mycsygt356eg5up/AlivePDF.swc
http://www.mediafire.com/view/bm6e605wqq5zwh5/ZeroClipboard.as
http://www.mediafire.com/download/9g1s27ppd779jbx/copy_csv_xls_pdf.swf

Now use this command to produce new swf file:

[code]c:\flex_sdk_4.6\bin\mxmlc -static-link-runtime-shared-libraries=true -library-path=C:\flex_sdk_4.6\frameworks\libs ZeroClipboard.as[/code]

It will export ZeroClipboard.swf file to c:\flex_sdk_4.6\bin rename it to copy_csv_xls_pdf.swf and put the file to your website content.

__________________________________________________

I know it looks hard but it goes easy if everything works. If you have more questions, I will try to help.

Regards,
Ali

intissar

frist thanks for this great tutorial its very helpful but i have tried the same thing for arabic i used 1256 instead 1254 but it dosent work any help please

etlie

Hey Ali,

I used your swf file to show Turkish characters. However, they still look annoying. "İ" character, which is the capital "i" is showing like 0. "İşlemler" word becomes "0_lemler", for example.

What can cause this problem?

I hope you can help me.

Thanks in advance.

fulls1z3

Great work Ali, thank you.

Another important point is, don't forget to clear the browser cache after the SWF replacement.

manonsnaoi

i can't compile new .swf in final step.
Error Log

C:\flex_sdk_4.6\bin\ZeroClipboard.as(203): col: 88 Error: Incorrect number of arguments. Expected no more than 2.

                    var ef:EmbeddedFont = new EmbeddedFont( new fontStream(), new afmStream(), CodePage.CP874 );

C:\flex_sdk_4.6\bin\ZeroClipboard.as(203): col: 79 Error: Access of undefined property CodePage.

                    var ef:EmbeddedFont = new EmbeddedFont( new fontStream(), new afmStream(), CodePage.CP874 );

C:\flex_sdk_4.6\bin\ZeroClipboard.as(248): col: 5 Error: Implicit coercion of a value of type Boolean to an unrelated type org.alivepdf.colors:IColor.

                            true,                     /* 6. alternateRowColor */

C:\flex_sdk_4.6\bin\ZeroClipboard.as(250): col: 5 Error: Implicit coercion of a value of type Number to an unrelated type org.alivepdf.colors:IColor.

                            .1,                       /* 8. border alpha */

C:\flex_sdk_4.6\bin\ZeroClipboard.as(252): col: 5 Error: Implicit coercion of a value of type Array to an unrelated type String.

                            columns                   /* 10. columns */

C:\flex_sdk_4.6\bin\ZeroClipboard.as(29): col: 27 Error: Definition org.alivepdf.fonts:CodePage could not be found.

    import org.alivepdf.fonts.CodePage;

simsek97

I used the swf file you have created. It work very well for excel creating but I have still problems for pdf creating.

simsek97

Ohh. I am very sorry. I forgot to clear cache. After clearing cache everything works very well. Thanks a lot for this great work.

DeoPriya

i'm trying to add utf-32 so i used the code page identifier 12000 having cp as prefix but i got the following error. Can anyone help me with this please.

C:\flex_sdk_4.6\bin\ZeroClipboard.as(206): col: 88 Error: Access of possibly und
efined property CP12000 through a reference with static type Class.

 var ef:EmbeddedFont = new EmbeddedFont( new fontStream()
, new afmStream(), CodePage.CP12000 );

                            ^

thanks

DeoPriya

Basically i'm looking for devnagri language support in pdfs, It is supported in excel file. I went through whole discussion and followed it but i encountered error mentioned above, please, someone help me out with devnagri font support in pdf.

Thanks

Heart1010

With this file I also can have a euro sign in PDF files?!

So I only have to replace my copy_csv_xls_pdf.swf file with the file from http://www.mediafire.com/download/9g1s27ppd779jbx/copy_csv_xls_pdf.swf, correct?

I've done that, also cleared the browser cache after the SWF replacement but still have a corrupt symbol where the euro sign (€) should be :(

Update: Ok, when I click the PDF button on my windows machine this PDF has € signs in it, great. But when I do that on my linux machine (which has arial.ttf in .fonts folder) I still get this broken € sign. Any ideas?

allan

If you can wait a little while, I'll be releasing a replacement for TableTools next week which will include an HTML5 method for creating PDFs and that will support UTF8. The AlivePDF library that TableTools uses just doesn't reliably support UTF8.

Allan

Heart1010

Next week? Great allan..! Thanks a lot!!!

StErMi

@allan do you have an update for this issue?

allan

The Buttons library which replaces TableTools supports UTF8 characters in the html5 pdf export button.

This is not functionality that will be added to TableTools.

Allan