網頁pdf列印——window.print()

阿新 • • 發佈：2019-01-12

瀏覽器核心是提供了列印功能的，只要在控制檯呼叫window.print()方法就可以將網頁列印成pdf檔案到我們選擇的路徑，但是列印的內容和格式可能不是我們想要的。所以寫這篇部落格介紹一種通用的方法：

下面是整個demo的程式碼：

<html>
<head>
            <script src="./js/jquery-1.7.2.min.js"></script>
</head>
<script>
      //頁面開啟時就初始化第一頁
      $(function (){
            $("body" 
).append("<div class='page'; style='page-break-after:always; background-color:red; width:700px'></div>");      
      });
    //開啟新頁面的方法，在body中插入新的div，並且設定屬性 page-break-after:always
      function newPage(){
            $("body").append("<br><div class='page'; style='page-break-after:always; background-color:red; width:700px'></div>" 
); 
      }
    //向頁面中插入內容，如果頁面高度大於200，就換新的一頁
      function insert(){
            if( $(".page:last").outerHeight()>200){
                  newPage()
            }else{
                  $(".page:last").append("<p>ertyuiopgehrtasbsdfghsfadhfdjadsfgh</p>");
            }

      }
    //點選列印時，替換innerHTML內容並呼叫瀏覽器列印方法 

      function printPage(){
            $("body").append("<!--endprint-->");//列印之前新增結尾標誌
            bdhtml=window.document.body.innerHTML;  //獲取到頁面html
            sprnstr="<!--startprint-->";
            eprnstr="<!--endprint-->"; //找到兩個標籤
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除標籤以外的東西
            window.document.body.innerHTML=prnhtml;
            window.print();
            window.document.body.innerHTML=bdhtml;//將頁面重新改回原始樣式
            window.location.href=window.location.href; //此處是業務需要 由於有動態生成資料 直接返回樣式會亂 所以手動重新整理了一下
      }

</script>
<body>
<input type="button" onclick="printPage()" value="列印"/>
<input type="button" onclick="insert()" value="插入"/>
<input type="button" onclick="newPage()" value="下一頁"/>

<!--startprint-->

</body>
</html>

這裡有幾個比較重要的地方

page-break-after:always
window.print();
sprnstr=”“;
eprnstr="“;

1、page-break-after:always

如果只是單純呼叫window.print();這個方法的話，瀏覽器會把整個網頁拿下來，從上到下渲染到pdf上面，如果一頁不夠會主動再起一頁。page-break-after:always這個屬性的作用就是告訴瀏覽器，看到這個屬性的標籤後請直接給我再起一頁，不管上一頁有沒有排滿。這個屬性有利於我們控制自己的頁面的樣式。
所以我們每一頁的開始應該要加上這個屬性，這樣就能按照我們的意願去分頁了

2、window.print();

這個是核心方法，沒什麼好說的。呼叫它就會將瀏覽器中innerHTML中的內容列印。

3、sprnstr=”``“; eprnstr=`"`“;

這兩個是我們人為設定的節點，這兩個節點之間就是點選列印按鈕後要列印的內容，其他部分會被忽略。相當於是將網頁中我們不需要列印的地方擷取掉了。比如我這個deno中的按鈕就是我不需要的。我將它放在這兩個標籤外面就可以了。具體實現方式如下：

            bdhtml=window.document.body.innerHTML;  //獲取到頁面html
            sprnstr="<!--startprint-->";
            eprnstr="<!--endprint-->"; //找到兩個標籤
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除標籤以外的東西
            window.document.body.innerHTML=prnhtml;

網頁pdf列印——window.print()

1、page-break-after:always

2、window.print();

3、sprnstr=”``“; eprnstr=`"`“;

網頁pdf列印——window.print()

瀏覽器區域性列印:Window.print()--無需外掛，相容IE

頁面區域性列印:Window.print()--無需外掛，相容IE

網頁列印的簡單實現 + window.print

window.print()列印網頁中指定內容的實現方法

前端網頁列印外掛print.js(可匯出pdf)

window.print()頁面列印之表格內容分頁填充進行分頁列印

Js通過window.print();實現列印

window.print 頁面列印

指定window.print 列印區域

JavaScript中window.print()列印

網頁上列印PDF檔案

利用JQuery在網頁上列印PDF

最簡單的列印方法window.print()

使用jqprint()實現列印，封裝window.print()

window.print()打印頁面指定內容（使用iframe保證原頁面不失效）

python 2.7 命令列列印、print、str()、repr()

怎麼用Python Flask模板jinja2在網頁上列印顯示16進位制數？

TP結合Prince 來用PDF列印

pdfmake 0.1.40 釋出，PDF 列印解決方案

網頁pdf列印——window.print()

1、page-break-after:always

2、window.print();

3、sprnstr=”“; eprnstr="“;

相關推薦

3、sprnstr=”``“; eprnstr=`"`“;