成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JS實現(xiàn)頁面打印(整體、局部)

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

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計制作的公司,為廣大用戶提供了網(wǎng)站設(shè)計、網(wǎng)站制作,成都網(wǎng)站設(shè)計,廣告投放平臺,成都做網(wǎng)站選創(chuàng)新互聯(lián)建站,貼合企業(yè)需求,高性價比,滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

方式一:window.print()

整體打印

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

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

局部打印

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

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

然后,在點擊事件中添加如下代碼

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() 打印時,如果內(nèi)容超出會自動分頁。但是我們?nèi)绻枰远x分頁范圍,如碰到表格分頁打印,可以通過進行如下設(shè)置:

<table width="100%" border="0" cellpadding="0" cellspacing="0"  > 
</table>

方式二、jqprint()

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

參考網(wǎng)址:https://www.jb51.net/article/102230.htm

請注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯誤問題是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默認高和寬都很小,可以再源碼中調(diào)大),默認是false
   importCSS: true, //true表示引進原來的頁面的css,默認是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css文件)
   printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會打破你的CSS規(guī)則)。
   operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的打印選項卡。默認是true
});

附言

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

這里只介紹兩種方式,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱:JS實現(xiàn)頁面打印(整體、局部)
URL網(wǎng)址:http://jinyejixie.com/article42/pgidhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、品牌網(wǎng)站設(shè)計、搜索引擎優(yōu)化、定制開發(fā)、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
大厂| 安丘市| 新丰县| 新化县| 肥乡县| 昌都县| 安乡县| 分宜县| 翁牛特旗| 孟村| 谢通门县| 烟台市| 海林市| 施秉县| 浦城县| 榕江县| 南城县| 镇原县| 永泰县| 大邑县| 泾阳县| 东城区| 赞皇县| 乌海市| 德州市| 郸城县| 武夷山市| 益阳市| 永德县| 麻江县| 合山市| 许昌市| 龙江县| 辽阳市| 洛南县| 息烽县| 新密市| 平乡县| 荥经县| 垣曲县| 弥勒县|