Pdfmake: Chinese language

Created on 2 Mar 2016  ·  20Comments  ·  Source: bpampuch/pdfmake

Hi!
is it possible to print in chinese(or japanese or etc) anyway? I have teste and no way.
Why? Fonts? UTF?

Here my code:

[  
   {  
      text:'日',
      style:'headerTableLeft'
   },
   {  
      text:'据',
      style:'headerTable'
   },
   {  
      text:'客',
      style:'headerTable'
   },
   {  
      text:'基准',
      style:'headerTable'
   },
   {  
      text:'增税',
      style:'headerTable'
   },
   {  
      text:'总值结',
      style:'headerTable'
   }
],
[  
   {  
      text:'星五 01/01/2016',
      style:'lineLeftWeek'
   },
   {  
      text:'132',
      style:'lineRightWeek'
   },
   {  
      text:'248',
      style:'lineRightWeek'
   },
   {  
      text:'650,18',
      style:'lineRightWeek'
   },
   {  
      text:'65,02',
      style:'lineRightWeek'
   },
   {  
      text:'715,20',
      style:'lineRightWeek'
   }
],
[  
   {  
      text:'总期结',
      style:'lineRightWeek'
   },
   {  
      text:'132',
      style:'lineRightWeek'
   },
   {  
      text:'248',
      style:'lineRightWeek'
   },
   {  
      text:'650,18',
      style:'lineRightWeek'
   },
   {  
      text:'65,02',
      style:'lineRightWeek'
   },
   {  
      text:'715,20',
      style:'lineRightWeek'
   }
]

Thanks for your help

Most helpful comment

你要下载node.js,然后下载bower,然后下载这个pdfmake的zip并解压,再安装grunt,在pdfmake这个目录下执行grunt dump_dir命令,但是你会发现缺少各种grunt插件,然后你要一个一个安装grunt插件。最后把你想要的支持中文的ttf文件放到pdfmake的examples\fonts目录下,然后执行grunt dump_dir命令,它不报错的情况下会把ttf文件加到build/vfs_fonts.js文件中,然后再引入它就好了。
在你调用createPdf方法之前加入下面的语句就好了,注:simhei是我的字体,你要换成你的字体
pdfMake.fonts={
simhei: {
normal: 'simhei.ttf',
bold: 'simhei.ttf',
italics: 'simhei.ttf',
bolditalics: 'simhei.ttf'
},
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
}
}

All 20 comments

The problem is the font Roboto. Roboto does not accept chinese characters.
You have to put a compatible font for each language.

To replace the font

After replacing fonts, use NPM to compile pdfmake source project execution

你要下载node.js,然后下载bower,然后下载这个pdfmake的zip并解压,再安装grunt,在pdfmake这个目录下执行grunt dump_dir命令,但是你会发现缺少各种grunt插件,然后你要一个一个安装grunt插件。最后把你想要的支持中文的ttf文件放到pdfmake的examples\fonts目录下,然后执行grunt dump_dir命令,它不报错的情况下会把ttf文件加到build/vfs_fonts.js文件中,然后再引入它就好了。
在你调用createPdf方法之前加入下面的语句就好了,注:simhei是我的字体,你要换成你的字体
pdfMake.fonts={
simhei: {
normal: 'simhei.ttf',
bold: 'simhei.ttf',
italics: 'simhei.ttf',
bolditalics: 'simhei.ttf'
},
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
}
}

@doyouknowme 你好,我现在在用 https://github.com/devongovett/pdfkit 在server端生成pdf,pdfkit有个问题就是一个字体中字符超过94个就没法显示,请问换用pdfmake能解决这个问题吗?

@PinkyJie 一个字体中字符超过94个 我没看懂是什么意思。 是一个句子里的字数超过94个字这个意思么?

@PinkyJie 一个句子的字数超过了一行之后不会换行,只用中文才这样,英文不会这样。pdfmake是基于pdfKit的 所以你用pdfKit会出现的问题 估计pdfmake也会出现

@PinkyJie 你也可以用'\n'自己换行,写一个函数把字符串切断再塞入‘\n’就能够实现换行了

@doyouknowme 这个https://github.com/devongovett/pdfkit/issues/114 里面提到,字符集太多的话处理不了

@doyouknowme 用自定义字体出现Uncaught Error: No unicode cmap for font错误是什么原因?

@doyouknowme 在服务器端 把新的字体文件上传 对应出来的字符还是没有中文,但是把字符复制到txt 或者word中 里面的中文正常显示,这可能是什么原因呢?
顺便吐槽 这个包的说明文档对服务端太不友好了

@amanda94 你的字体文件有经过处理吗?假如没有 看看这个https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

自定义的字体需要对项目进行重新grunt

@doyouknowme 服务器端没有这个文件啊vfs_fonts.js

@amanda94 加我扣扣吧 1092738937

@doyouknowme 编译后显示没有error,我下载的是simsun.ttf,按如下引用后,中文还是不能显示。。求帮助。。
D:\TDDOWNLOAD\pdfmake-master>grunt dump_dir
Running "dump_dir:fonts" (dump_dir) task
File "build/vfs_fonts.js" created.
Done, without errors.
pdfMake.fonts={ simsun: { normal: 'simsun.ttf', bold: 'simsun.ttf', italics: 'simsun.ttf', bolditalics: 'simsun.ttf' } };

@doyouknowme 换成msyh.ttf(微软雅黑)后终于可以了,不过字体包好大呀。。

@shenlan211314
我的也是用simsun.ttf宋体 中文出不来 但是就是需要宋体 怎么搞

我在用 pdfmake 过程之中碰到过一些问题,在这里说下:

1. 中文字体

中文默认不支持,需要中文的话,自己需要添加字体包。详细配置 @doyouknowme #533 。

2. vfs_fonts.js 文件

增加中文后,vfs_fonts.js 文件特别大。怎么破?

3. 表格

如果我需要导出表格的话需要配置一大堆的属性。可能我看得少,有没有一个配置项指定一个现存的 Table 直接导出的?

4. 一个最致命的问题:导出慢

增加中文后, 导出或者打印的过程中速度特别慢。特别慢!对, 特别慢!!

Could you guys post instructions in English, too?

For those looking to add support to languages such as Japanese and Chinese, so that the characters appear properly in the pdf, I did the following in a server-side Node app:

When you create a new "PdfPrinter", you have to pass an object with the fonts configuration. For that object, define your custom font:

const fonts = {
  Roboto: {
    normal: 'fonts/Roboto-Regular.ttf',
    bold: 'fonts/Roboto-Medium.ttf',
    italics: 'fonts/Roboto-Italic.ttf',
    bolditalics: 'fonts/Roboto-MediumItalic.ttf'
  },
  Aozora: {
    normal: 'fonts/AozoraMinchoRegular.ttf',
    bold: 'fonts/AozoraMincho-bold.ttf',
    italics: 'fonts/AozoraMinchoRegular.ttf',
    bolditalics: 'fonts/AozoraMinchoRegular.ttf',
  }
};

In my case, I have some Aozora fonts, so I defined a property for that. I also have the font files at the locations defined by the values. You can choose any fonts for normal, bold, italics, and bolditalics, as they will be used in each of those states. If you want to enable bold text, you need to have a bold version of the font and assign the correct path there.

Then, in your docDefinition, define a defaultStyle property to use your font:

const docDefinition = {
  content: [
    'First paragraph: おはようございます漢字',
    '日本語で書きます。Second one, this time a little bit longer to make sure, this line will be divided into at least two lines :)'
  ],
  defaultStyle: {
    font: 'Aozora'
  }
};
printer.createPdfKitDocument(docDefinition)

where printer comes from

const PdfPrinter = require('pdfmake/src/printer');
const printer = new PdfPrinter(fonts);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sayjeyhi picture sayjeyhi  ·  3Comments

ValeSauer picture ValeSauer  ·  3Comments

jokris1 picture jokris1  ·  3Comments

michaelqiji picture michaelqiji  ·  3Comments

einfallstoll picture einfallstoll  ·  3Comments