這里寫目錄標題

• 一、vue-print-nb 實現打印功能
• • 1、安裝
  • 2、在main.js 中引入
  • 3、在vue頁面中的使用
  • 4、打印分頁 `style="page-break-after: always"`
• 二、網頁 用針式打印機打印模糊問題

一、vue-print-nb 實現打印功能

1、安裝

cnpm i vue-print-nb -S

2、在main.js 中引入

import Print from 'vue-print-nb'
Vue.use(Print)

3、在vue頁面中的使用

<template><div class="print"><div id="printPage">這里面是放的打印內容</div><button v-print="'#printPage'">打印</button></div> </template>

v-print 中的內容 和 id對應，打印出來的內容是 整個id框框內的內容

4、打印分頁 style="page-break-after: always"

<template><div class="print"><div id="printPage">// 這里面是放的打印內容<div style="page-break-after: always">// 打印的第一頁內容</div><div style="page-break-after: always">// 打印的第二頁內容</div></div><button v-print="'#printPage'">打印</button></div> </template>

二、網頁 用針式打印機打印模糊問題

原因：網頁的打印，是先生成一張圖片，接著打印，針式打印機打印會模糊；
解決：試著調整打印的文字的字體，我這里：

font-family: Microsoft YaHei; color: #000;

總結

以上是生活随笔為你收集整理的vue 使用vue-print-nb 实现打印功能 和 用针式打印机打印模糊问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。