1.pdfmake 好东西,在此不对服务器端做任何总结,因为本人未去实践。
2.pdfmake.org, pdfmake-master文档
这是硬性下载,但是在使用过程中会有汉化的问题。(对中国的文字总是这样)
既然如此需按以下步骤来产生我们的汉化版的pdfmake
0.创建一gruntproject.
1.安装npm
2.安装grunt-cli:npm install grunt-cli
3.安装grunt
4.创建.配置packjson.js,gruntfile.js文件:样例中的hello world加下
5.安装npm install pdfmake
6.运行grunt,如有not mould not found 等字样,用npm install 直接安装。
7.安装完成,在系统上找.ttf的汉字文件,拷贝到examples/fonts
8.运行grunt 生成文件(grunt dump-dir)
9.在pdfmake.js文中将做如下的修改:
var defaultClientFonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
simfang: {
normal: 'simfang.ttf',
bold: 'simfang.ttf',
italics: 'simfang.ttf',
bolditalics: 'simfang.ttf'
}
};
将其它有关的Roboto字样用simfang替换掉。
10.将build/生成的文档拷贝到在用的程序文件夹下。
说得简单,做起来挺费时费劲儿,现在想在用的GRIDVIS的pdf导出那些老外必定是用了类似的插件却没有做类似的细化工作。
生成图表PDF方法:
1.利用pdfmake的生成pdf的方法
2.利用canvg的应用
3.参照Highchart-export-clientside.js中的方法(svgToCanvas)
此方法返回的是canvas对象
var svgToCanvas = function(svg, width, height, callback) {
var canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvg(canvas, svg, {
ignoreMouse: true,
ignoreAnimation: true,
ignoreDimensions: true,
ignoreClear: true,
offsetX: 0,
offsetY: 0,
scaleWidth: width,
scaleHeight: height,
renderCallback: function() { callback(canvas); }
});
return canvas;
};
5.整体思路:svg-canvas-image;
一、svg的获得:
var chart=$('#container').highcharts();
var svg = chart.getSVGForExport();//svg的代码不带有控制字符。
二、canvas的生成:
//建立canvas元素
var canvas=document.createElement('canvas');
canvas.width=$("#graphpic svg").width();
canvas.height=$("#graphpic svg").height();
var width=$("#graphpic svg").width();
var height=$("#graphpic svg").height();
//将svg写入canvas
canvg(canvas, svg, {
ignoreMouse: true,
ignoreAnimation: true,
ignoreDimensions: true,
ignoreClear: true,
offsetX: 0,
offsetY: 0,
scaleWidth: width,
scaleHeight: height,
renderCallback: function(){
console.log(canvas);
}
});
三、canvas转为image
var imagedata=canvas.toDataURL('image/png');
四、定义pdfmake options
pdfMake.fonts = {
simfang: {
normal: 'simfang.ttf',
bold: 'simfang.ttf',
italics: 'simfang.ttf',
bolditalics: 'simfang.ttf'
}
}
var docDefinition = {
content: [
{ text: '头文字', style: 'header' },
'No styling here, this is a standard paragraph',
{ text: '小文字', style: 'anotherStyle' },
{ text: '多文字', style: [ 'header', 'anotherStyle' ]},
{
// if you specify both width and height - image will be stretched
image:imagedata,
width: 150,
height: 150
}
],
styles: {
header: {
fontSize: 22,
bold: true
},
anotherStyle: {
italics: true,
alignment: 'right'
}
}
}
五、pdfmake下载
pdfMake.createPdf(docDefinition).download();
用到如下的脚 本调用
<script src="media/js/pdfmake/highchart/highcharts/highcharts.js"></script>
<script src="media/js/pdfmake/highchart/highcharts/modules/exporting.js"></script>
<script src="media/js/pdfmake/highchart/highcharts/modules/canvas-tools.js"></script>
<script src="media/js/pdfmake/highchart/highcharts/export-csv/export-csv.js"></script>
<script type="application/javascript" src="media/js/pdfmake/highchart/jspdf/dist/jspdf.min.js"></script>
<script src="media/js/pdfmake/highchart/highcharts-export-clientside/highcharts-export-clientside.js"></script>
<script src='media/js/pdfmake/pdfmake.js'></script>
<script src="media/js/pdfmake/vfs_fonts.js"></script>
http://pdfmake.org/playground.html
http://jsfiddle.net/mychn9bo/4/
http://stackoverflow.com/questions/31610129/pdfmake-html-table-to-pdfmake-table
https://datatables.net/release-datatables/extensions/TableTools/examples/new_init.html