关于pdfmake的总结

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