2. 程式人生 > >JS實現頁面列印（整體、區域性）

JS實現頁面列印（整體、區域性）

阿新 • • 發佈：2018-11-02


我們在網頁開發過程中經常會有列印頁面的需求，通過JS來實現的方法有很多，這裡我做了一個整理，供大家參考。

方式一：window.print()

整體列印

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

現在就輕鬆實現了頁面的列印，但是這種方式會將整個頁面列印，如果想要實現指定區域的列印需要通過下面的設定

區域性列印

首先，在html中，通過star和end來標記列印區域

?
1 2 3 4 5 6 7 8 < h1 >這塊內容不需要列印</ h1 > <!--startprint--> < div class = "content" >    這裡是需要列印的內容      ..... </ div > <!--endprint--> < h1 >這塊內容不需要列印</ h1 >

然後，在點選事件中新增如下程式碼

?
1 2 3 4 5 6 7 8 9 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();   }

過濾列印區域的內容

例如

?
1 2 3 4 5 6 7 8 <!--startprint--> < div class = "content" >    < button class = "noprint" >預覽</ button >    < button class = "noprint" >列印</ button >     這裡是需要列印的內容      .....    </ div > <!--endprint-->

上面的預覽和列印按鈕不希望列印，如果要過濾的話可以做下面的樣式設定

?
1 2 3 4 5 6 7 <style type= "text/css" >    @media print {      .noprint{        display :

相關推薦

JS實現頁面列印（整體、區域性）

我們在網頁開發過程中經常會有列印頁面的需求，通過JS來實現的方法有很多，這裡我做了一個整理，供大家參考。 方式一：window.print() 整體列印 ?

js實現頁面列印

js有多種方式實現列印 window.print() window.print();會彈出列印對話方塊，列印的是window.document.body.innerHTML中的內容,但是iframe中無法使用需要用 document.execCommand(“p

JS實現頁面列印(去掉頁首頁尾)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PcyearSeo</title> <head> &

深度學習 （四）Keras利用CNN實現圖片識別（Mnist、Cifar10）

視覺集        視覺資料庫是用來提供給圖片識別領域用素材，目前各個教材常用的主要有手寫數字識別庫、10中小圖片分類庫，詳細介紹如下： Mnist       &

使用巢狀迴圈實現正方形列印（Square of Asterisks）

使用兩層巢狀迴圈，實現行列迴圈列印輸出，形成簡單圖案。 程式碼如下： //JHTP Exercise 4.29:Square of Asterisks //by [email protec

用CSS使div在整個頁面中（水平、垂直）都居中——萬能的

<style> html,body{ height: 100%; } body{ display: flex; ali

JS實現快速排序（2種方法）

1、用i和j兩個指標 2、用一個指標判斷，大的放在右邊，小的數放在左邊 <!DOCTYPE html> <html> <head> <title>quickSort</title> <meta cha

Lottie一個可輕鬆實現各種動畫（SVG、Animations）的開源專案

先看一下官網給的圖片： 相信肯定不少小夥伴還在為svg，Animations而頭疼嗎！Lottie這個開源專案的出現，真是久旱逢甘霖（個人感覺）。 有些人會認為這些即使不用這也可以實現啊！的確能實現，Android 5.x 之後提供了對 SVG

js 實現頁面區域性（或圖片）放大功能(vue)

方法： 　　adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.styles = 'transform: scale(2

js或jquery實現頁面列印可區域性列印

js或jquery實現頁面列印(區域性列印) 1、js實現（可實現區域性列印） 程式碼如下:<html> <title>js列印</title> <head

js 複製（拷貝、copy）功能的實現

　　   　　今日網上瀏覽別人專案,看到有人用了document.execCommand這個屬性，於是想起之前我選用Clipboard.js 來實現。對於這種不常用的屬性還是不太放心，於是隨手查了下關於複製的資料，以作甄選！ 　　目前copy主流有四種方式： 　　　　ZeroClipboa

JS：實現頁面列印功能

利用JS實現列印操作 條件：IE瀏覽器的WebBrowser外掛，WebBrowser是IE的內建外掛，只需IE即可開啟，可自動使用外掛 前提：在html程式碼的body標籤下呼叫WebBrowser外掛，程式碼如下 <object id="WebBrowser"

JS實現排序演算法（氣泡排序、快速排序）

const a = [21, 3, 242, 3432, 13, 13, 123, 4, 35, 22, 1]; // 氣泡排序 // 核心思想：每次比較相鄰的數，如果它們順序錯誤，就把它們交換過來。如同氣泡一樣往後翻滾。 // 最外層的迴圈，每次至少要讓一個元素歸位。 /

Jquery、Js實現網頁列印，及列印樣式的自定義

<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Title</title> &

JS實現頁面進入、返回定位到具體位置

其實瀏覽器也自帶了返回的功能，也就是說，自帶了返回定位的功能。正常的跳轉，返回確實可以定位，但是有些特殊場景就不適用了。例如，某些元素是在某種情況下才加上的，又或者多級定位。  目前，我知道的返回定位到具體位置有兩種方法： ①利用id定位，在跳轉的時候帶上某個模組的i

JS實現表單內容驗證、阻止表單提交（onsubmit）

onsubmit屬性只在 <form> 表單中使用。 onsubmit事件是當表單提交時進行相關JS操作的一個事件。 onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的

JS 實現瀏覽器列印、列印預覽

目前正在做瀏覽器端採用JS方式實現列印這麼一個功能，JS列印實現的方法很多，但是相容各個瀏覽器實現列印預覽的功能有些棘手，現將實現的內容及遇到的問題記錄下來，希望有大牛看到所提的問題後可以給予解答，在此感謝啦。 1.JS實現列印的方式 方式一：window.print()

ReactNative基礎（五）使用react-navigation實現頁面的跳轉、引數的傳遞（StackNavigator）

此部落格基於react-native-0.48.4 Navigator（導航欄） 在ReactNative v0.43之前的時候官方提供了Navigator元件，在v0.44版本之後官

利用Intellij+MAVEN+SpringMVC+URI.js實現頁面的中英文切換（國際化)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/P

報表 匯出列印 功能實現的常用解決方案參考（Java、前端）

前端一：通過 jquery.wordexport.js 匯出word二：通過百度js模板引擎生成word文件<script type="text/javascript"src="http://www.xdocin.com/xdoc.js"></script&