javascript在網頁上列印單張圖片,列印網頁上的圖片

本文目錄一覽:

使用javascript如何在網頁上輸出如下圖形狀? * *** ***** *** *

用最簡單的方法是:

script

document.write(“*br”);

document.write(“***br”);

document.write(“*****br”);

document.write(“***br”);

document.write(“*”);

/script

不知道要求中是不是需要使用循環方法的不.

用javascript編寫在網頁里寫一個超鏈接,點擊超鏈接能打開新的窗口並顯示一張圖片.

先編寫 一個html ,設置添加圖片記錄文件連接。

js 添加一個 function  設置 window.open

function Wopen(){

 window.open(‘http://地址’,’_blank’,’width=600,height=400,top=100px,left=0px’)

 }

html

head/head

body

a href onclick=”javascript:{Wopen()” style=”cursor:hand;background-color:#00aaa7;line-height:28px;border:solid 10px #888888;”打開圖片/a

/body

/html

使用asp或者js實現將整個網頁生成為一張圖片

做個列印按鈕 就可以了 當點擊列印時可以將列印內容列印為圖片格式

不過萬一對方沒有印表機 那可能要開發一個類似圖片列印控制項的東西讓客戶安裝

javascript window.print() 列印問題?預覽時圖片正好,列印到A4上時變小??據說是print列印的是屏幕大小

1。把你的css里的長度單位改成毫米(mm),不要用像素(px),用磅(pt)也行.如果是默認沒寫單位就是像素(px),也是要改的。因為像素是瀏覽器的單位也就是窗口的單位,而毫米或者磅是列印後的紙面上單位。

2。在頁面列印的時候要設置瀏覽器的紙張參數,就是點文件-〉頁面設置。把上下左右寬度間距設置好。還要去掉標題頁頭頁角之類的,要不列印會把url都打出來。

3。設置css的時候可以加上 media=”print” ,css 默認值是both,最好寫兩套css。一套是print,一套是screen.因為print的 意思是在列印的時候會採用的css樣式,screen就是瀏覽器顯示的樣式。所以,有的時候都是用顯示與列印不一樣的樣式。例如:

link href=”print.css” rel=”stylesheet” type=”text/css” media=”print” /

link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen” /

這樣,瀏覽器在顯示的時候會使用screen.css,在列印的時候會使用print.css。

4。自己再多試試,頁面列印其實不難,就是要仔細。

js如何實現頁面列印

HTMLHEADTITLEjavascript列印-列印頁面設置-列印預覽代碼/TITLE

META http-equiv=Content-Type content=”text/html; charset=gb2312″ /

SCRIPT language=javascript

function printsetup(){

// 列印頁面設置

wb.execwb(8,1);

}

function printpreview(){

// 列印頁面預覽

wb.execwb(7,1);

}

function printit()

{

if (confirm(‘確定列印嗎?’)) {

wb.execwb(6,6)

}

}

/SCRIPT

/HEAD

BODY

DIV align=center

OBJECT id=wb height=0 width=0

classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb/OBJECT

INPUT onclick=javascript:printit() type=button value=列印 name=button_print /

INPUT onclick=javascript:printsetup(); type=button value=列印頁面設置 name=button_setup /

INPUT onclick=javascript:printpreview(); type=button value=列印預覽 name=button_show /

/DIV

/BODY

/HTML

求一個js日期代碼,需要在網頁上輸出的是圖片,就是0-9的數字,替換成設計好的圖片在網頁上顯示

按照以下步驟來:

1、獲取當前日期

2、生成日期字元串

3、顯示

準備好一張數字的圖片:

【代碼】

style type=”text/css”

/* css */

.num_0, .num_1, .num_2, .num_3, .num_4, .num_5, .num_6, .num_7, .num_8, .num_9 { background:url(numbers.gif) no-repeat 0 0; display:inline-block; width:40px; height:40px; }

.num_1 { background-position:-40px 0; }

.num_2 { background-position:-80px 0; }

.num_3 { background-position:-120px 0; }

.num_4 { background-position:-160px 0; }

.num_5 { background-position:-200px 0; }

.num_6 { background-position:-240px 0; }

.num_7 { background-position:-280px 0; }

.num_8 { background-position:-320px 0; }

.num_9 { background-position:-360px 0; }

/style

div id=”dis”/div

script

var date=new Date(),

    str=”+date.getFullYear()+(date.getMonth()+1)+date.getDate(),

    i=0,

    len=str.length,

    html=[];

for(; ilen; i++)

  html.push(‘span class=”num_’+str[i]+'”nbsp;/span’);

document.getElementById(‘dis’).innerHTML=html.join(”);

/script

【運行】

運行後,js代碼會添加一些元素到頁面上,會生成如圖所示的結構:

看下頁面顯示效果:

顯示是通過樣式表完成的。

原創文章,作者:GUDE,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/144740.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
GUDE的頭像GUDE
上一篇 2024-10-26 11:52
下一篇 2024-10-26 11:52

相關推薦

  • 用Python繪製酷炫圖片

    在本篇文章中,我們將展示如何使用Python繪製酷炫的圖片。 一、安裝Python繪圖庫 在使用Python繪製圖片之前,我們需要先安裝Python繪圖庫。Python有很多繪圖庫…

    編程 2025-04-29
  • 使用axios獲取返回圖片

    使用axios獲取返回圖片是Web開發中很常見的需求。本文將介紹如何使用axios獲取返回圖片,並從多個方面進行詳細闡述。 一、安裝axios 使用axios獲取返回圖片前,首先需…

    編程 2025-04-29
  • Python 圖片轉表格

    本文將詳細介紹如何使用Python將圖片轉為表格。大家平時在處理一些資料的時候難免會遇到圖片轉表格的需求。比如從PDF文檔中提取表格等場景。當然,這個功能也可以通過手動複製、粘貼,…

    編程 2025-04-29
  • Python緩存圖片的處理方式

    本文將從多個方面詳細闡述Python緩存圖片的處理方式,包括緩存原理、緩存框架、緩存策略、緩存更新和緩存清除等方面。 一、緩存原理 緩存是一種提高應用程序性能的技術,在網路應用中流…

    編程 2025-04-29
  • Python如何抓取圖片數據

    Python是一門強大的編程語言,能夠輕鬆地進行各種數據抓取與處理。抓取圖片數據是一個非常常見的需求。在這篇文章中,我們將從多個方面介紹Python如何抓取圖片數據。 一、使用ur…

    編程 2025-04-29
  • python爬取網頁並生成表格

    本文將從以下幾個方面詳細介紹如何使用Python爬取網頁數據並生成表格: 一、獲取網頁數據 獲取網頁數據的一般思路是通過HTTP請求獲取網頁內容,最常用的方式是使用Python庫r…

    編程 2025-04-28
  • Avue中如何按照後端返回的鏈接顯示圖片

    Avue是一款基於Vue.js、Element-ui等技術棧的可視化開發框架,能夠輕鬆搭建前端頁面。在開發中,我們使用到的圖片通常都是存儲在後端伺服器上的,那麼如何使用Avue來展…

    編程 2025-04-28
  • Python利用Image加圖片的方法

    在Python中,利用Image庫可以快速處理圖片,並加入需要的圖片,本文將從多個方面詳細闡述這個操作。 一、Image庫的安裝和基礎操作 首先,我們需要在Python中安裝Ima…

    編程 2025-04-28
  • 網頁防篡改的重要性和市場佔有率

    網頁防篡改對於保護網站安全和用戶利益至關重要,而市場上針對網頁防篡改的產品和服務也呈現出不斷增長的趨勢。 一、市場佔有率 據不完全統計,目前全球各類網頁防篡改產品和服務的市場規模已…

    編程 2025-04-28
  • 使用CKSlide實現圖片輪播

    CKSlide是一個基於jQuery的插件,可以方便地為網頁添加幻燈片和圖片輪播效果。使用CKSlide可以讓網站更加生動、活潑,給用戶帶來更好的體驗。 一、CKSlide基本用法…

    編程 2025-04-28

發表回復

登錄後才能評論