前端教程：JavaScript頁面打印

多時候，你想給一個按鈕，在網頁上通過一個實際的打印機打印出網頁的內容。

JavaScript可使用window對象的print函數就可以實現這樣的功能。

當執行JavaScript的print函數window.print()將會打印當前頁面。可以使用onclick事件如下直接調用此函數：

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011復制代碼類型：[javascript]

這將產生以下按鈕，打印此頁。

這符合打印出來的頁面，但這個不是一個推薦的方式。打印機友好的頁面實際上只是一個文本，沒有圖像，圖形或廣告頁面。

可以使用以下頁式打印機友好方式：

使頁面的副本，并離開了不需要的文本和圖形，然后從原始鏈接到該打印機友好的頁面。

如果你不想讓頁面的額外副本，那么可以使用像適當的注釋標記打印文本 .....  然后你可以使用PERL或其他腳本在后臺清除打印文本和顯示進行最后的打印。網站使用同樣的方法給打印設備對我們網站的訪客。

如何打印頁面：

如果沒有人在提供上述設備，那么你可以使用瀏覽器的標準工具欄讓網頁打印出來。按照鏈接如下：

File --> Print --> Click OK button.

開課吧廣場-人才學習交流平臺

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

開發管理系統或票據打印功能時，打印功能是一個很常見的需求。本教程將詳細介紹如何在 Vue3 項目中使用 vue-print 插件實現票據文檔的打印功能。

一、引言

現代Web應用中，有很多場景需要打印功能，例如財務報表、發票、訂單明細等。Vue3是目前流行的前端框架之一，vue-print插件提供了簡單易用的API，使得在Vue3中實現打印功能變得便捷。

二、安裝與設置

1. 初始化 Vue3 項目

如果你還沒有 Vue3 項目，你可以使用 Vue CLI 快速創建一個：

vue create vue-print-demo
cd vue-print-demo

2. 安裝 vue-print 插件

在項目根目錄下運行以下命令安裝 vue-print 插件：

npm install vue-print-nb@next

三、配置 vue-print 插件

在 src/main.js 中配置 vue-print 插件：

import { createApp } from 'vue';
import App from './App.vue';
import Print from 'vue-print-nb';

const app = createApp(App);

app.use(Print);

app.mount('#app');

四、實現打印功能

1. 創建票據打印的組件

在 src/components 目錄下創建 PrintInvoice.vue 組件：

<template>
  <div ref="printArea">
    <h1>發票</h1>
    <p>發票號：{{ invoiceNumber }}</p>
    <p>日期：{{ date }}</p>
    <p>客戶名稱：{{ customer }}</p>
    <table>
      <tr>
        <th>商品</th>
        <th>數量</th>
        <th>單價</th>
        <th>總價</th>
      </tr>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.quantity * item.price }}</td>
      </tr>
    </table>
    <p>總計：{{ total }}</p>
  </div>
  <button @click="print">打印發票</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Item {
  id: number;
  name: string;
  quantity: number;
  price: number;
}

export default defineComponent({
  name: 'PrintInvoice',
  setup() {
    const printArea = ref<HTMLElement | null>(null);

    const invoiceNumber = 'INV-123456';
    const date = new Date().toLocaleDateString();
    const customer = '某某公司';
    const items: Item[] = [
      { id: 1, name: '商品1', quantity: 2, price: 50 },
      { id: 2, name: '商品2', quantity: 1, price: 100 },
    ];
    const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);

    const print = () => {
      if (printArea.value) {
        const printContent = printArea.value.innerHTML;
        const newWindow = window.open('', '', 'width=800,height=600');
        if (newWindow) {
          newWindow.document.write(printContent);
          newWindow.document.close();
          newWindow.print();
          newWindow.close();
        }
      }
    };

    return {
      printArea,
      invoiceNumber,
      date,
      customer,
      items,
      total,
      print,
    };
  },
});
</script>

<style scoped>
/* 添加一些樣式使打印內容更好看 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>

2. 使用打印組件

在 src/App.vue 中使用我們創建的打印組件：

<template>
  <div id="app">
    <PrintInvoice />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import PrintInvoice from './components/PrintInvoice.vue';

export default defineComponent({
  name: 'App',
  components: {
    PrintInvoice,
  },
});
</script>

<style>
/* 可選：添加一些樣式 */
</style>

五、運行應用

一切配置完成后，我們可以運行應用并查看效果：

npm run serve

打開瀏覽器訪問 http://localhost:8080，你應該會看到一個票據打印界面，并且可以點擊打印按鈕進行打印。

六、總結

使用 Vue3 和 vue-print 插件可以輕松實現打印票據文檔的功能。

在線咨詢

上一篇：Vue3 中動態監聽HTML元素大小變化的實踐與探索
下一篇：資深 Web 開發的經驗之談：為什么你開發的網頁不應該大于 14KB？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商