JS打印PDF

1.直接打印

直接調用瀏覽器的打印功能，打印整個頁面

function preview () {
     window.print();
}

2.打印指定區域

通過開始標記、結束標記來打印，打印局部頁面

　　 <!--startprint-->
    <div>
        打印的內容
    </div>
    <!--endprint-->

 

　　　　function preview () {
            bdhtml=window.document.body.innerHTML; 
            sprnstr="<!--startprint-->"; //開始打印標識字符串有17個字符
            eprnstr="<!--endprint-->"; //結束打印標識字符串
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //從開始打印標識之后的內容
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取開始標識和結束標識之間的內容
            window.document.body.innerHTML=prnhtml; //把需要打印的指定內容賦給body.innerHTML
            window.print(); //調用瀏覽器的打印功能打印指定區域
            window.document.body.innerHTML=bdhtml;//重新給頁面內容賦值；
            return false;
        }

注意：1.如果你要打印的區域中包含vue賦值對象，那你的開始結束標志符需要放在實例化VUE綁定的ID外，如下，vue實例化綁定的是ID“#content”，那么標識符就要放在“#content”元素外

 

2.打印的這個函數，調用方式不能用vue的@click來調用，請用js的onclick來調用，函數允許放在vue的methods中，調用：onclick="vm.preciew()"，這是為什么呢？因為函數中的最后，我們重新給指定的區域賦值，如果是@click，重新賦值就不能給按鈕再次綁定上點擊事件，原生的點擊事件重新賦值是能夠重新綁定上去的

當然，你如果只是用到js或者jquery，那么，你將不用考慮上面這兩個問題。

3.去掉打印時的頁眉和頁尾

    <style media="print">
        @page {
            size: auto;  /* auto是初始值 */
            margin: 0mm; /* 這會影響打印機設置中的邊距 */
        }
    </style>