整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開發管理系統或票據打印功能時，打印功能是一個很常見的需求。本教程將詳細介紹如何在 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小時內與您取得聯系。
