侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

Angularjs ui-grid pdfmake.js 导出excel/pdf及pdf中文问题

2024-05-08 星期三 / 0 评论 / 0 点赞 / 60 阅读 / 2021 字

ui-grid使用介绍看这篇博客:http://my.oschina.net/gmd/blog/670895 一. 处理Angularjs ui-grid 导出pdf 无法显示中文问题: 第一步:pd

ui-grid使用介绍看这篇博客:http://my.oschina.net/gmd/blog/670895

一. 处理Angularjs ui-grid 导出pdf 无法显示中文问题:

第一步:pdfmake 自定义支持中文的字体

   pdfmake 官网 : http://pdfmake.org/#/

   pdfmake自定义字体:https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

需要下载node.js,然后下载bower,然后下载这个pdfmake的zip并解压,再安装grunt,在pdfmake这个目录下执行grunt dump_dir命令,但是你会发现缺少各种grunt插件,然后你要一个一个安装grunt插件。最后把你想要的支持中文的ttf文件放到pdfmake的examples/fonts目录下,然后执行grunt dump_dir命令,它不报错的情况下会把ttf文件加到build/vfs_fonts.js文件中,然后将vfs_fonts.js拷贝到工程中在html中引入这个js。

第二步: 引入js

pdfmake.min.js  导出pdf插件

vfs_fonts.js 就是第1步自定义的字体js文件

<!-- ui-grid export -->	<script src="../pdfmake/pdfmake.min.js"></script>	<script src="../pdfmake/vfs_fonts.js"></script>	<script src="../ui-grid/csv.js"></script>

第三步: 在你调用createPdf方法执行以下js,注:simblack是自定义的字体。

window.pdfMake.fonts={ simblack: {  normal: 'simpleblack.ttf',  bold: 'simpleblack.ttf',  italics: 'simpleblack.ttf',  bolditalics: 'simpleblack.ttf' }, Roboto: {  normal: 'Roboto-Regular.ttf',  bold: 'Roboto-Medium.ttf',  italics: 'Roboto-Italic.ttf',  bolditalics: 'Roboto-Italic.ttf'}}

第四步: 定义gridOptions 时指定字体为simblack:

 exporterPdfDefaultStyle : {font:'simblack',fontSize: 9}

 

广告 广告

评论区