前端浏览器生成pdf文件，并且自定义里面的内容

前言：在公司的项目里面遇到一个需求，根据后台提供的心电数据，前端在pdf文件里面绘制出该心电图，并且可以打印。

遇到的主要问题：

1. 浏览器的计算单位是PX,而打印出来纸上的计量单位是mm,  1px !=1mm,所以需要知道单位如何变成一致的。

2. 该插件里面绘制的中文字，会出现乱码。

解决： 

1. 通过jsPDF插件，可以实现该功能，本人亲测利用该插件， 绘制的单位可以设置为mm ,默认为mm ,并且打印出来的确是毫米。

2. 自己下载一个转汉字的库，另行解决。

官方文档：（需翻墙）https://rawgit.com/MrRio/jsPDF/master/docs/global.html#setDrawColor

EX：

window.onload = function () {
    var doc = new jsPDF();
    // var doc = new jsPDF('landscape');//横排
    doc.setProperties({//设置文档属性
        title: 'Title',
        subject: 'This is the subject',
        author: 'wrf',
        keywords: 'javascript, web 2.0, ajax',
        creator: 'MEEE',
        format: 'a4',
        unit: 'mm',
        orientation: 'p',  //竖排
        hotfixes: [] // an array of hotfix strings to enable
    });
    doc.setTextColor(0, 255, 0);
    doc.setFontSize(22);
    doc.setFont("times");
    doc.setFontType("italic");
    doc.text(20, 20, '123');//添加文字

    doc.line(20, 20, 100, 20);
    doc.setLineWidth(1);
    doc.line(20, 25, 120, 25);
    doc.setLineWidth(1);
    doc.line(20, 30, 140, 30);
    doc.setLineWidth(1);
    doc.line(30, 35, 160, 35);
    // doc.setDrawColor(255, 0, 0);
    doc.setLineWidth(1);

    doc.addPage();//添加页

    // doc.setLineWidth(1);//设置线宽
    doc.setDrawColor(0, 255, 0);//设置画笔颜色
    doc.setFillColor(255, 0, 0);//设置填充颜色
    doc.line(60, 20, 115, 60);//画线，两个坐标
    doc.rect(100, 50, 20, 30); //画矩形，左上角坐标，宽度，高度，只有边框
    doc.ellipse(20, 20, 20, 10, 'F');//画椭圆，中心点坐标，宽度，高度，只有边
    doc.circle(120, 20, 20, 'FD');//画圆，中心点坐标，半径，边框和填充都有
    doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
    console.log(doc.output('datauri'));
    document.getElementById("iframe123").src = doc.output('datauristring');//在iframe中显示

}

<iframe id="iframe123" frameborder="0" width="400" height="500"></iframe>