文档章节

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

whitelover
 whitelover
发布于 2016/07/20 11:20
字数 402
阅读 4992
收藏 4

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}

 

© 著作权归作者所有

whitelover
粉丝 12
博文 26
码字总数 10236
作品 0
私信 提问
谷歌提出渐进式 web 开发概念,Angular Ignite UI 实现

所有的企业开发团队肯定都愿意花更少的钱办更多的事,Angular和渐进式web应用程序让这一切成为可能。 在过去一年,Angular在web开发者社区取得了巨大增长。该框架正在成为面向公众的从微软到...

周其
2017/11/22
3.9K
15
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
推荐 15 个 Angular.js 应用扩展指令

几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性。官方新闻发布稿覆盖了绝大部分,这同样值得放于官方...

oschina
2015/06/04
9.6K
16
图解AngularJS Wijmo5和LightSwitch

Visual Studio 2013 中的 LightSwitch 有新增功能,包括更好的团队开发支持以及在构建 HTML 客户端桌面和 Office 365 应用程序方面的改进。本文结合最新发布的Wijmo 5提供的AngularJs进行图解...

葡萄城控件技术团队
2015/01/07
0
0
OSC 第 127 期高手问答 -- Angular 2 新特性

OSCHINA 本期高手问答(9月18日- 9月26日) 我们请来了@asnowwolf(汪志成)为大家解答关于Angular 2的问题。 @asnowwolf(汪志成),儒家信徒,ThoughtWorker,Google 开发者专家(GDE)。Ang...

局长
2016/09/18
6.4K
27

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
40
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
15
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
6
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部