# Jquery套件-PrintArea
###### tags: `實作功能`

[官網](https://plugins.jquery.com/PrintArea/)

> 
> [參考來源](http://tech.yunyingxbs.com/article/detail/id/355.html)

## 實際使用遇到問題1
* 第一頁最上面都會有空白


#### 跟同事 Debug 後
* PrintArea建了一個 iframe
* 發現是 css 的問題 ( body padding-top 50px )

* 解決問題

* 結論：基本上大部分不需要設定就很好用，注意一下CSS

## 實際使用遇到問題2
配合 ChartJs 使用時，沒有顯示圖

#### 原因
我猜應該是因為畫布複製不過去... 複製過去也只是空有設定好 Size 的畫布

#### 解法
準備一個隱藏的 image 元素

因為 PrintArea 每次都會重新產生 iframe，
只好在列印的時候隱藏 canvas，顯示 canvas 轉的 img；
在顯示的時候 顯示 canvas，隱藏 canvas 轉的 img

function CreateHiddenImgFromCanvas() {
        // 清掉原本的圖
        $('#imageFromMyChart_PC').remove();

        var canvas = document.getElementById('myChart_PC'),
            dataUrl = canvas.toDataURL('image/png', 1), // quality = 1 ( 最佳 )
            imageFoo = document.createElement('img');
        imageFoo.src = dataUrl;

        imageFoo.id = 'imageFromMyChart_PC'
        // Style your image here
        imageFoo.style.display = 'none';
        imageFoo.style.width = '100%';
        imageFoo.style.height = '400px';

        // After you are done styling it, append it to the BODY element
        $('#divChartContainer_PC').append(imageFoo);
    }

---