1. 程式人生 > >呼叫瀏覽器的列印預覽

呼叫瀏覽器的列印預覽

最近改一個頁面,想要做一個列印功能,而且需要列印預覽,我還沒處理過這種需求,特此記錄一下。

要列印是比較簡單的,js中使用window.print()函式就可以列印,內容為body的內容,相容IE10以下的瀏覽時可以引入WebBrowser物件,然後呼叫WebBrowser.ExecWB(7,1)進行列印預覽,呼叫WebBrowser.ExecWB(6,1)進行列印。

主要的問題是何時呼叫,因為是區域性列印,所以如果在原頁列印的話,有兩種方法:隱藏不需要列印的內容或者提取出想列印的內容替換進body中,兩種方法都涉及比較多的DOM操作,而且原有的樣式會對列印造成影響。所以我打算新開頁面,把需要的內容填進去,另外建立一個列印專用的css檔案引入,再呼叫列印,得到了比較好的展示效果。

有個注意的點是,注入css檔案之後,頁面需要一點時間進行渲染,下面這個情況會在未渲染完成的時候進行列印:

var newWin=window.open('');//新開頁面
var print=document.getElementById("print");//提取要列印的內容
newWin.document.write(print.outerHTML);//輸入要列印的內容
var link=newWin.document.createElement("link");//插入新樣式檔案
link.href="style/print.css";
link.type="text/css";
link.rel="stylesheet";
newWin.document.head.appendChild(link);
newWin.print();

如何解決呢?辦法是使用setTimenOut()函式,把延遲時間設定為0,再在裡面呼叫print()就能實現一個延遲的效果,讓頁面先渲染再打印出正確的樣式。這裡涉及到瀏覽器解釋js的原理,在瀏覽器有一個Task Queue,執行setTimenOut(fun,0)的時候會把fun推到Task Queue中去,等待瀏覽器的執行棧空了之後(代入上面的例子就是樣式載入之後),Task Queue中的內容才會被推入執行棧中執行,從而達到一種延時效果。

另外,需要列印的頁面往往會有比較多的表格和表單,需要針對性地改寫樣式,例如清除表單元件的預設樣式。textarea會隨著內容的增加而產生滾動條,在列印之前需要先把textarea改為p標籤(或者別的),這也是不選擇在原頁上面呼叫print()的原因。

(另外吐槽一下CSDN的編輯器,自動換行真是太非人類了)

相關推薦

呼叫瀏覽器列印

最近改一個頁面,想要做一個列印功能,而且需要列印預覽,我還沒處理過這種需求,特此記錄一下。 要列印是比較簡單的,js中使用window.print()函式就可以列印,內容為body的內容,相容IE10以下的瀏覽時可以引入WebBrowser物件,然後呼叫WebBrowser

IE瀏覽器實現列印

最近遇到這麼一個需求,需要在IE瀏覽器上列印的時候,不直接呼叫印表機,而是先開啟列印預覽頁面,再進行列印操作。 這樣,就需要對原本的列印方法進行改寫了。具體實現如下: 在jsp頁面進行以下操作。

WEB頁面列印列印 相容所有瀏覽器

因專案裡要做頁面列印預覽以及列印功能,還要求相容大部分主流瀏覽器 實現方式有很多最後決定用window.print();大部分瀏覽器都適用, window.print()方式ie瀏覽器不支援列印預覽,針對ie瀏覽器的預覽用ie自有列印元件 WebBrowser.ExecWB實現 ie瀏覽器預覽時要把不需要預

JS 實現瀏覽器列印列印

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

谷歌瀏覽器中全屏及跳過頁面列印的設定

1.首先在桌面建立一個谷歌瀏覽器的快捷方式; 2.開啟瀏覽器>>然後開啟“設定”選單>>在“啟動時”一項中選擇“開啟特定網頁或一組網頁”>>點選“新增新網頁”,輸入專案或網站地址>>儲存; 3.滑鼠右鍵點選快捷方式>

用WPF實現列印列印

原文: 用WPF實現列印及列印預覽 應該說,WPF極大地簡化了我們的列印輸出工作,想過去使用VC++做開發的時候,列印及預覽可是一件極麻煩的事情,而現在我不會再使用C++來做Windows的桌面應用了——價效比實在太低。 WPF的列印功能是很強大而簡便的,它甚至能夠直接列印介面上的內容,

怎麼使用CAD編輯器列印CAD圖紙?

怎麼使用CAD編輯器列印預覽CAD圖紙?在日常的工作中,建築設計師們編輯完圖紙後,不僅僅需要對CAD圖紙進行檢視,有的時候如果要去建築施工地去檢視的話,不可能把電腦一起帶到施工現場吧,那就需要變編輯好的CAD圖紙打印出來,那怎麼使用CAD編輯器列印預覽CAD圖紙?具體要怎麼來進行操作了,下面就來教教大傢俱體操

列印:print

一、函式 function printed(){ $.ajaxPrint({ url: '<g:createLink controller="oneLevel" action="print"/>', title: '

java+js將資料列印PDF

1、pdfjs包的位置 2.後臺java @RequestMapping(params = "goViewPDF") public ModelAndView goViewPDF(HttpServletRequest request,HttpServletRespon

列印功能

發票列印 @RequestMapping(value = “getXps1”) public void xpsGet1(HttpServletResponse response){ File file = new File(“C:/Users/Administr

VC++對話方塊程式列印列印的實現(三)

本文首先介紹了利用MFC提供的文件檢視框架來實現一個列印程式,實現列印預覽,在此基礎上,同時通過對MFC原始碼的深入探討,提出了利用該方法在對話方塊上用MFC實現列印功能,結果表明,利用MFC實現列印不僅方便,而且功能很強大,能夠根據不同的需求很方便的打印出所需要的格式。本文還實現了一個在對話方塊中

VC++對話方塊程式列印列印的實現(二)

這是接上面的具體實現能夠成功的打印出資料 CPrintView.h的詳細程式碼 pragma once #include "StatisticsCoverDlg.h" // CPrintView 檢視 #define PRINTMARGIN 2 BOOL CALLBACK _AfxMyPr

VC++對話方塊程式列印列印的實現(一)

張明奇(卡哥)註釋:成功版本         MFC文件/檢視的應用程式,嚮導給了列印及列印預覽的標準支援。使這類應用程式列印及列印預覽工作得以簡化。另一類對話方塊程式卻沒有相應支援,從MFC列印及列印預覽的標準支援

C#列印時更改預設邊距,並設定預設的寬高

 new PrinterMargins(20,20,20,20,787,1129)   //此步最好在初始化,document 的時候就設定好邊距,否則後面邊距設定後,還有一些預設的X1,Y1非設定的值不會變化,會是預設的100,影響了列印時整個座標的結果。  

c# 頁面列印 並儲存為PDF

這次列印的方法主要是獲取頁面的html檔案 進行整理 並生成列印預覽 1.C# 的.aspx 頁面 需要設定   <!--startprint--> 和 <!--endprint--> 用於設定列印內容 2.列印按鈕設定onclick="previe

如何呼叫瀏覽器列印功能來列印頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="print.aspx.cs" Inherits="_print" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

讓Sublime Text2支援瀏覽器

提醒:本文最後更新於 2517 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 從Editplus轉到Sublime Text2的同學,不知道有沒覺得它少了個很有用的功能:view in browser(ctrl+b)。平時寫點小demo時,那種一秒鐘切瀏覽器看下效果,一秒後再切回來改下程式碼的

基於Metronic的Bootstrap開發框架經驗總結(9)--實現Web頁面內容的列印和儲存操作

在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章,這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容,總體來說基本達到了一個穩定的狀態,隨著時間的推移可以會引入一些更好更新的內容進行完善,本篇繼續這個系列,主要介紹如何實現Web頁面內容的列印預覽和儲存操作。 1、Web頁

js呼叫瀏覽器列印

function btnPrintClick(){ bdhtml=window.document.body.innerHTML; //先儲存當前頁面document.body.innerHTML=doc

Web下實現列印列印列印設定、匯出到Excel

 常用JS列印: var printContent = $("printtable").innerHTML; var bodyContent = document.body.innerHTML; document.body.innerHTML = printCont