web的各種前端列印方法之jquery列印外掛程式jqprint實現網頁列印

來源:互聯網
上載者:User

web的列印方法具我自己懂得知道的有:

1、JQuery外掛程式Jqprint實現
2、JQery列印外掛程式PrintArea實現網頁列印
3、CSS控制網頁列印樣式

JQuery外掛程式Jqprint實現
首先要匯入js檔案:
jquery.jqprint.js下載
複製代碼 代碼如下:
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" src="jquery.jqprint.js"></script>html代碼:

複製代碼 代碼如下:
<div class="my_show">
這個列印時是顯示的
</div>
<div class="my_hidden">
這個列印時是隱藏的。
</div>
<input type="button" id="print"/>

javascript代碼
複製代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function() {
$("#print").click(function(){
$(".my_show").jqprint();
})
});
</script>

該外掛程式還提供了一些參數可配置: 
debug: false,//如果是true則可以顯示iframe查看效果(iframe預設高和寬都很小,可以再源碼中調大),預設是false
importCSS: true, //true表示引進原來的頁面的css,預設是true。(如果是true,先會找$(“link[media=print]“),若沒有會去找$(“link”)中的css檔案)
printContainer: true,//表示如果原來選擇的對象必須被納入列印(注意:設定為false可能會打破你的CSS規則)。
operaSupport: true//表示如果外掛程式也必須支援歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的列印選項卡。預設是true
而我自己使用到的只有importCSS:原始頁面中的連結將匯入到 iframe。第一次它媒體 searchs = 列印,如果沒有,將匯入的正常的 css 檔案。

importCSS樣本
複製代碼 代碼如下:
$('.my_show').jqprint({
importCSS://CSS樣式檔案
});

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.