整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
开发管理系统或票据打印功能时，打印功能是一个很常见的需求。本教程将详细介绍如何在 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 插件可以轻松实现打印票据文档的功能。
在软件项目比较偏向BS架构，也就是使用网页浏览器等工具软件呈现用户交互界面的系统软件。如果在网页中不但能呈现报表或标签，也能直接调用本地或网络共享打印机打印是很多项目都需要的。
网页打印解决方案有很多，比如使用ActivityX控件，JavaScript插件等。网页打印或多或少地都有一些限制，我接下来介绍的这两种方案也是有一些限制，但总体使用起来也能比较好地解决项目需求，这才是根本。
一、使用锐浪报表
使用锐浪报表可以展现复杂的报表、图表、条码标签等，直接可以在网页上或PC客户端上使用，还是很方便的，功能也强大，还可以免费使用。具体锐浪的介绍可以到官网上查看。
以下图示就是在我们微邦软件平台的某进销存项目上使用效果。
可以看到，报表呈现后，上面一排工具栏足够满足项目要求，如打印、导出、页面设置等，使用也很方便，平台已经封装，只要设计好模板，在网页中调用生成即可展现。
锐浪报表这种方式是使用ActivityX控件，对浏览器是有要求，主流国产浏览器还能胜任。不过锐浪有服务器版或HTML5版方式，对浏览器要求较低。
二、使用帆软报表
使用帆软也是很不错的选择，帆软也能做到报表、图表和条码标签的制作和展示，不过帆软是不免费的。
以下图示就是在我们微邦软件平台的某MES项目上使用效果，我们使用帆软工具经过预选设计好的模板，然后在后台生成pdf后发送客户端展示。目前主流浏览器在网页中直接显示pdf也是支持的比较好，如果不支持，也有第三方JavaScript的pdf库可以使用。
结合我们这款开源免费的平台对两个项目案例的整合，我们对功能和报表以最方便快捷的方式完成，缩短项目周期，解决用户实际需要为目标。
印机打印的三种方式、适用各种web框架(vue.js/web打印/报表打印)_哔哩哔哩_bilibili
-----------------------------------------------------------------------------------------------------------------------------
*请认真填写需求信息，我们会在24小时内与您取得联系。
