前言：在公司的專案裡面遇到一個需求，根據後臺提供的心電資料，前端在pdf檔案裡面繪製出該心電圖，並且可以列印。

遇到的主要問題：

1. 瀏覽器的計算單位是PX,而打印出來紙上的計量單位是mm,  1px !=1mm,所以需要知道單位如何變成一致的。

2. 該外掛裡面繪製的中文字，會出現亂碼。

解決： 

1. 通過jsPDF外掛，可以實現該功能，本人親測利用該外掛， 繪製的單位可以設定為mm ,預設為mm ,並且打印出來的確是毫米。

2. 自己下載一個轉漢字的庫，另行解決。

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>