開發(fā)管理系統(tǒng)或票據打印功能時，打印功能是一個很常見的需求。本教程將詳細介紹如何在 Vue3 項目中使用 vue-print 插件實現(xiàn)票據文檔的打印功能。

一、引言

現(xiàn)代Web應用中，有很多場景需要打印功能，例如財務報表、發(fā)票、訂單明細等。Vue3是目前流行的前端框架之一，vue-print插件提供了簡單易用的API，使得在Vue3中實現(xiàn)打印功能變得便捷。

二、安裝與設置

1. 初始化 Vue3 項目

如果你還沒有 Vue3 項目，你可以使用 Vue CLI 快速創(chuàng)建一個：

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');

四、實現(xiàn)打印功能

1. 創(chuàng)建票據打印的組件

在 src/components 目錄下創(chuàng)建 PrintInvoice.vue 組件：

<template>
  <div ref="printArea">
    <h1>發(fā)票</h1>
    <p>發(fā)票號：{{ invoiceNumber }}</p>
    <p>日期：{{ date }}</p>
    <p>客戶名稱：{{ customer }}</p>
    <table>
      <tr>
        <th>商品</th>
        <th>數(shù)量</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">打印發(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>
/* 添加一些樣式使打印內容更好看 */
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 中使用我們創(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>

五、運行應用

一切配置完成后，我們可以運行應用并查看效果：

npm run serve

打開瀏覽器訪問 http://localhost:8080，你應該會看到一個票據打印界面，并且可以點擊打印按鈕進行打印。

六、總結

使用 Vue3 和 vue-print 插件可以輕松實現(xiàn)打印票據文檔的功能。

在軟件項目比較偏向BS架構，也就是使用網頁瀏覽器等工具軟件呈現(xiàn)用戶交互界面的系統(tǒng)軟件。如果在網頁中不但能呈現(xiàn)報表或標簽，也能直接調用本地或網絡共享打印機打印是很多項目都需要的。

網頁打印解決方案有很多，比如使用ActivityX控件，JavaScript插件等。網頁打印或多或少地都有一些限制，我接下來介紹的這兩種方案也是有一些限制，但總體使用起來也能比較好地解決項目需求，這才是根本。

一、使用銳浪報表

使用銳浪報表可以展現(xiàn)復雜的報表、圖表、條碼標簽等，直接可以在網頁上或PC客戶端上使用，還是很方便的，功能也強大，還可以免費使用。具體銳浪的介紹可以到官網上查看。

以下圖示就是在我們微邦軟件平臺的某進銷存項目上使用效果。

可以看到，報表呈現(xiàn)后，上面一排工具欄足夠滿足項目要求，如打印、導出、頁面設置等，使用也很方便，平臺已經封裝，只要設計好模板，在網頁中調用生成即可展現(xiàn)。

銳浪報表這種方式是使用ActivityX控件，對瀏覽器是有要求，主流國產瀏覽器還能勝任。不過銳浪有服務器版或HTML5版方式，對瀏覽器要求較低。

二、使用帆軟報表

使用帆軟也是很不錯的選擇，帆軟也能做到報表、圖表和條碼標簽的制作和展示，不過帆軟是不免費的。

以下圖示就是在我們微邦軟件平臺的某MES項目上使用效果，我們使用帆軟工具經過預選設計好的模板，然后在后臺生成pdf后發(fā)送客戶端展示。目前主流瀏覽器在網頁中直接顯示pdf也是支持的比較好，如果不支持，也有第三方JavaScript的pdf庫可以使用。

結合我們這款開源免費的平臺對兩個項目案例的整合，我們對功能和報表以最方便快捷的方式完成，縮短項目周期，解決用戶實際需要為目標。

印機打印的三種方式、適用各種web框架(vue.js/web打印/報表打印)_嗶哩嗶哩_bilibili

Vue實現(xiàn)打印的方式

第一種打印的方式html 打印

1、谷歌瀏覽器自帶的功能，Ctrl + P，會彈出打印預覽界面

2、JavaScrpit的方法也可以彈出同樣的頁面，可以選擇全部打印和局部打印

3、第二種打印的方法是

4、優(yōu)秀的web打印插件通常支持模版設計功能

5、我們通常要設計好插件的打印模版

6、

7、第三種是指令打印

8、指令打印是通過打印插件向打印機發(fā)送指令

9、可以向打印機端口或驅動發(fā)送原始指令

10、條碼打印機，RFID打印機就有很好的支持

11、指令打印的優(yōu)勢是打印的速度和穩(wěn)定

具體使用-----12、為了實現(xiàn)局部打印，需要在Vue項目中引用組件

---------------------------------------------------------------------------------------------

如何使用在Vue項目輸入npm i vue-print-nb

安裝后在Vue項目中進行引入

import Print from 'vue-print-nb'

先在項目中進行跑一跑

再在打印機中添加打印按鈕 <button v-print>

選擇打印會覆蓋整個頁面

會整個打印全部頁面

如果想要實現(xiàn)局部打印：

局部打印HTML的寫法，標簽寫著id

局部打印的寫法,這里寫了局部打印的內容

點擊打印就可以簡單實現(xiàn)局部打印的功能

-----------------------------------------------------------------------------------------------------------------------------

方法2，插件打印，老牌的C-LODOP,很多電商后臺和快遞后臺都在用這個

官網地址

www.lodnp.net/download.html

這里有來跟C-

用來跟C-Lodop通訊的JavaScript的包

將loadop.js引用到的web框架中

在index頁面中，引入打印的方法，import {}

接著設計兩個打印設計的按鈕

新建打印模版

打印設計用來調用C-Lodop的設計窗口

打印預覽就是設計一個模版

提供一些常用的空間控件

條形碼，二維碼，html頁面預覽等

添加一個超文本框作為標題欄

接著是打印名稱

設計完可以直接關閉窗體

預覽窗體中可以直接進行打印

也可以添加LODOP.PRINT()函數(shù)進行打印

指令打印的方法

?