整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端教程: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]

这将产生以下按钮,打印此页。

这符合打印出来的页面,但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本,没有图像,图形或广告页面。

可以使用以下页式打印机友好方式:

使页面的副本,并离开了不需要的文本和图形,然后从原始链接到该打印机友好的页面。

如果你不想让页面的额外副本,那么可以使用像适当的注释标记打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用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 插件可以轻松实现打印票据文档的功能。