整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
開(kāi)發(fā)管理系統(tǒng)或票據(jù)打印功能時(shí)，打印功能是一個(gè)很常見(jiàn)的需求。本教程將詳細(xì)介紹如何在 Vue3 項(xiàng)目中使用 vue-print 插件實(shí)現(xiàn)票據(jù)文檔的打印功能。
現(xiàn)代Web應(yīng)用中，有很多場(chǎng)景需要打印功能，例如財(cái)務(wù)報(bào)表、發(fā)票、訂單明細(xì)等。Vue3是目前流行的前端框架之一，vue-print插件提供了簡(jiǎn)單易用的API，使得在Vue3中實(shí)現(xiàn)打印功能變得便捷。
如果你還沒(méi)有 Vue3 項(xiàng)目，你可以使用 Vue CLI 快速創(chuàng)建一個(gè)：
vue create vue-print-demo
cd vue-print-demo
在項(xiàng)目根目錄下運(yùn)行以下命令安裝 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 目錄下創(chuàng)建 PrintInvoice.vue 組件：
<template>
<div ref="printArea">
<h1>發(fā)票</h1>
<p>發(fā)票號(hào)：{{ invoiceNumber }}</p>
<p>日期：{{ date }}</p>
<p>客戶名稱：{{ customer }}</p>
<table>
<tr>
<th>商品</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
<th>總價(jià)</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>總計(jì)：{{ total }}</p>
</div>
<button @click="print">打印發(fā)票</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>
/* 添加一些樣式使打印內(nèi)容更好看 */
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 中使用我們創(chuàng)建的打印組件：
<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>
一切配置完成后，我們可以運(yùn)行應(yīng)用并查看效果：
npm run serve
打開(kāi)瀏覽器訪問(wèn) http://localhost:8080，你應(yīng)該會(huì)看到一個(gè)票據(jù)打印界面，并且可以點(diǎn)擊打印按鈕進(jìn)行打印。
使用 Vue3 和 vue-print 插件可以輕松實(shí)現(xiàn)打印票據(jù)文檔的功能。
在軟件項(xiàng)目比較偏向BS架構(gòu)，也就是使用網(wǎng)頁(yè)瀏覽器等工具軟件呈現(xiàn)用戶交互界面的系統(tǒng)軟件。如果在網(wǎng)頁(yè)中不但能呈現(xiàn)報(bào)表或標(biāo)簽，也能直接調(diào)用本地或網(wǎng)絡(luò)共享打印機(jī)打印是很多項(xiàng)目都需要的。
網(wǎng)頁(yè)打印解決方案有很多，比如使用ActivityX控件，JavaScript插件等。網(wǎng)頁(yè)打印或多或少地都有一些限制，我接下來(lái)介紹的這兩種方案也是有一些限制，但總體使用起來(lái)也能比較好地解決項(xiàng)目需求，這才是根本。
一、使用銳浪報(bào)表
使用銳浪報(bào)表可以展現(xiàn)復(fù)雜的報(bào)表、圖表、條碼標(biāo)簽等，直接可以在網(wǎng)頁(yè)上或PC客戶端上使用，還是很方便的，功能也強(qiáng)大，還可以免費(fèi)使用。具體銳浪的介紹可以到官網(wǎng)上查看。
以下圖示就是在我們微邦軟件平臺(tái)的某進(jìn)銷存項(xiàng)目上使用效果。
可以看到，報(bào)表呈現(xiàn)后，上面一排工具欄足夠滿足項(xiàng)目要求，如打印、導(dǎo)出、頁(yè)面設(shè)置等，使用也很方便，平臺(tái)已經(jīng)封裝，只要設(shè)計(jì)好模板，在網(wǎng)頁(yè)中調(diào)用生成即可展現(xiàn)。
銳浪報(bào)表這種方式是使用ActivityX控件，對(duì)瀏覽器是有要求，主流國(guó)產(chǎn)瀏覽器還能勝任。不過(guò)銳浪有服務(wù)器版或HTML5版方式，對(duì)瀏覽器要求較低。
二、使用帆軟報(bào)表
使用帆軟也是很不錯(cuò)的選擇，帆軟也能做到報(bào)表、圖表和條碼標(biāo)簽的制作和展示，不過(guò)帆軟是不免費(fèi)的。
以下圖示就是在我們微邦軟件平臺(tái)的某MES項(xiàng)目上使用效果，我們使用帆軟工具經(jīng)過(guò)預(yù)選設(shè)計(jì)好的模板，然后在后臺(tái)生成pdf后發(fā)送客戶端展示。目前主流瀏覽器在網(wǎng)頁(yè)中直接顯示pdf也是支持的比較好，如果不支持，也有第三方JavaScript的pdf庫(kù)可以使用。
結(jié)合我們這款開(kāi)源免費(fèi)的平臺(tái)對(duì)兩個(gè)項(xiàng)目案例的整合，我們對(duì)功能和報(bào)表以最方便快捷的方式完成，縮短項(xiàng)目周期，解決用戶實(shí)際需要為目標(biāo)。
印機(jī)打印的三種方式、適用各種web框架(vue.js/web打印/報(bào)表打印)_嗶哩嗶哩_bilibili
-----------------------------------------------------------------------------------------------------------------------------
?
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
