欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)頁面打?。ㄕw、局部)

 更新時(shí)間:2017年08月18日 10:08:16   作者:小果子_G  
本篇文章主要介紹了JS實(shí)現(xiàn)頁面打印(整體、局部),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

我們在網(wǎng)頁開發(fā)過程中經(jīng)常會有打印頁面的需求,通過JS來實(shí)現(xiàn)的方法有很多,這里我做了一個(gè)整理,供大家參考。

方式一:window.print()

整體打印

<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>

現(xiàn)在就輕松實(shí)現(xiàn)了頁面的打印,但是這種方式會將整個(gè)頁面打印,如果想要實(shí)現(xiàn)指定區(qū)域的打印需要通過下面的設(shè)置

局部打印

首先,在html中,通過star和end來標(biāo)記打印區(qū)域

<h1>這塊內(nèi)容不需要打印</h1>
<!--startprint-->
<div class="content">
  這里是需要打印的內(nèi)容
    .....
</div>
<!--endprint-->
<h1>這塊內(nèi)容不需要打印</h1>

然后,在點(diǎn)擊事件中添加如下代碼

function doPrint() {   
    bdhtml=window.document.body.innerHTML;   
    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();   
}  

過濾打印區(qū)域的內(nèi)容

例如

<!--startprint-->
<div class="content">
  <button class="noprint">預(yù)覽</button>
  <button class="noprint">打印</button>
   這里是需要打印的內(nèi)容
    .....
  </div>
<!--endprint-->

上面的預(yù)覽和打印按鈕不希望打印,如果要過濾的話可以做下面的樣式設(shè)置

    <style type="text/css">
      @media print {
        .noprint{
          display: none;
        }
      }
    </style>

or

    <style type="text/css" media="print">
      .noprint{
        display: none;
      }
    </style>

兩種寫法任選其一

分頁打印

使用 window.print() 打印時(shí),如果內(nèi)容超出會自動分頁。但是我們?nèi)绻枰远x分頁范圍,如碰到表格分頁打印,可以通過進(jìn)行如下設(shè)置:

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
</table>

方式二、jqprint()

jqprint是一個(gè)基于jQuery編寫的頁面打印的一個(gè)小插件,但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害,最近的項(xiàng)目中幫了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式進(jìn)行打印的,而這個(gè)插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝,可以輕松實(shí)現(xiàn)打印網(wǎng)頁上的某個(gè)區(qū)域,這是個(gè)亮點(diǎn)。

參考網(wǎng)址:http://www.dbjr.com.cn/article/102230.htm

請注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯(cuò)誤問題是juqery版本兼容問題

解決方法:加入遷移輔助插件 jquery-migrate-1.0.0.js可解決版本問題

引入

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

js

<script language="javascript">
function a(){
    $("#ddd").jqprint();
  }
</script>

html

<div id="ddd">
  <table>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
</div>
<input type="button" onclick=" a()" value="打印"/>

設(shè)置模板打印

$("#printContainer").jqprint({
   debug: false, //如果是true則可以顯示iframe查看效果(iframe默認(rèn)高和寬都很小,可以再源碼中調(diào)大),默認(rèn)是false
   importCSS: true, //true表示引進(jìn)原來的頁面的css,默認(rèn)是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css文件)
   printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會打破你的CSS規(guī)則)。
   operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true
});

附言

另外還可以使用html 標(biāo)簽<object>引入Webbrowser控件(只兼容IE)或者調(diào)用windows底層打印,報(bào)安全警告,不建議使用(不支持局部打?。?br />

這里只介紹兩種方式,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript實(shí)現(xiàn)簡單的html5視頻播放器

    javascript實(shí)現(xiàn)簡單的html5視頻播放器

    網(wǎng)頁視頻音頻播放器大家并不陌生,在IE中我們可以運(yùn)行ActiveX來嵌入微軟的Media Player或者其他的本地播放器,當(dāng)然可能大部分我們都是使用Flash來制作播放器。在HTML5發(fā)展迅速的今天,讓我們嘗試用HTML5來制作網(wǎng)頁播放器吧,畢竟無論是PC還是移動設(shè)備,HTML5是未來的趨勢
    2015-05-05
  • 淺談JavaScript字符串與數(shù)組

    淺談JavaScript字符串與數(shù)組

    本文給大家簡單介紹了下javascript中的字符串和數(shù)組,都是些十分基礎(chǔ)的知識,小伙伴們要學(xué)好javascript,一定要把這2點(diǎn)理解清楚。
    2015-06-06
  • 創(chuàng)建一個(gè)類Person的簡單實(shí)例

    創(chuàng)建一個(gè)類Person的簡單實(shí)例

    如何創(chuàng)建一個(gè)類Person?下面小編就為大家?guī)硪黄獎?chuàng)建一個(gè)類Person的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧
    2016-05-05
  • 微信小程序如何獲取圖片寬度與高度

    微信小程序如何獲取圖片寬度與高度

    這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • JavaScript中逗號運(yùn)算符介紹及使用示例

    JavaScript中逗號運(yùn)算符介紹及使用示例

    這篇文章主要介紹了JavaScript中逗號運(yùn)算符介紹及使用示例,本文講解了逗號運(yùn)算符的定義、使用例子及實(shí)際使用的一些技巧,需要的朋友可以參考下
    2015-03-03
  • JS判斷移動端訪問設(shè)備并加載對應(yīng)CSS樣式

    JS判斷移動端訪問設(shè)備并加載對應(yīng)CSS樣式

    JS判斷不同web訪問環(huán)境,主要針對移動設(shè)備,提供相對應(yīng)的解析方案,本例是加載不同的css樣式
    2014-06-06
  • js實(shí)現(xiàn)簡單的貪吃蛇游戲

    js實(shí)現(xiàn)簡單的貪吃蛇游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-04-04
  • js獲取指定日期周數(shù)以及星期幾的小例子

    js獲取指定日期周數(shù)以及星期幾的小例子

    根據(jù)某年某周獲取一周的日期。如開始日期規(guī)定為星期四到下一周的星期五為一周,需要的朋友可以參考下
    2014-06-06
  • JS實(shí)現(xiàn)圖片預(yù)覽的兩種方式

    JS實(shí)現(xiàn)圖片預(yù)覽的兩種方式

    這篇文章主要介紹了JS實(shí)現(xiàn)圖片預(yù)覽的兩種方式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-06-06
  • JavaScrpt判斷一個(gè)數(shù)是否是質(zhì)數(shù)的實(shí)例代碼

    JavaScrpt判斷一個(gè)數(shù)是否是質(zhì)數(shù)的實(shí)例代碼

    本文通過實(shí)例代碼給大家分享了JavaScrpt判斷一個(gè)數(shù)是否是質(zhì)數(shù),需要的朋友參考下吧
    2017-06-06

最新評論