多时候,你想给一个按钮,在网页上通过一个实际的打印机打印出网页的内容。
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
都可以。
实例:
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>
实例解析
什么是HTML?
标签
<标签>内容</标签>
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中实现打印功能变得便捷。
如果你还没有 Vue3 项目,你可以使用 Vue CLI 快速创建一个:
vue create vue-print-demo
cd vue-print-demo
在项目根目录下运行以下命令安装 vue-print 插件:
npm install vue-print-nb@next
在 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');
在 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>
在 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 插件可以轻松实现打印票据文档的功能。
*请认真填写需求信息,我们会在24小时内与您取得联系。