前言

項目中經(jīng)常會用到前端調(diào)用瀏覽器打印的功能，也經(jīng)常會遇到一些問題，寫這篇文章是為了更好的梳理一下相關(guān)內(nèi)容。下面的內(nèi)容基于vue。
如果需要用到前端生成二維碼可以看我的這篇文章：在vue項目中使用qrcodesjs2生成二維碼

注：以下都是基于edge瀏覽器進行的，另外身邊沒有打印機，實際打印效果如何不清楚

print.js

這里用一下別人寫好的庫，print-demo

項目下載下來后，找到print.js，我們只需要這個。如果是vue2的項目直接用就好了，vue3的項目就簡單改一下就可以

// const MyPlugin = {};
// MyPlugin.install = function (Vue, options) {
//     // 4. 添加實例方法
//     Vue.prototype.$print = Print;
// };
// export default MyPlugin;
export default Print;

如何使用

聲明打印區(qū)域

可通過設(shè)置class 類名或 id 指定打印區(qū)域，但由于vue項目涉及到打包部署，推薦使用ref獲取DOM節(jié)點，如果使用id或class獲取，打包部署后打印內(nèi)容可能顯示空白。

<div class="printDom">指定打印區(qū)域</div>
<div id="printDom">指定打印區(qū)域</div>
<div ref="printDom">指定打印區(qū)域</div>

調(diào)用打印方法

vue2 項目

//main.js
import Print from './print';
Vue.use(Print);
// xx.vue
 this.$print(this.$refs.printDom, {});

vue3項目，在需要使用的頁面，引入方法，然后方法調(diào)用。

聲明不打印區(qū)域

聲明"no-print"類名 ，此時print方法中，不需要特意聲明，默認會剔除.no-print區(qū)域

<div class="no-print">不打印區(qū)域</div>
Print('#printDom');

自定義類名，此時需要在print方法中通過"noPrint"屬性指定不打印區(qū)域

<div class="no-print-box">自定義不打印區(qū)域類名</div>
Print('#printDom',{noPrint:'.no-print-box'});

參數(shù)說明

this.$print(this.$refs.printDom, {
     noPrint: '.noPrint',
     onStart: () => {
        console.log('打印開始');
     },
     onEnd: () => {
         onsole.log('打印完成');
     }
});

樣式

table樣式

打印中表格是不可或缺的，從網(wǎng)上找了份樣式簡單修改了一下。如果覺得不好看，可以自己改一下

 table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}
table tr {
    background: #EFF3F5;
}
table td,
table th {
    /**文字垂直、水平居中 */
    vertical-align: middle;
    text-align: center;
    /** 基礎(chǔ)樣式 */
    border: 2px solid black;
    border-left: 0px;
    color: #666;
    height: 40px;
    font-size: 18px;
    min-width: 150px;
    line-height: 30px;
}
table td:last-child,
table th:last-child {
    border-right: 0px;
}
table thead th {
    background-color: #CCE8EB;
    width: 100px;
}

但是實際在瀏覽器里的顯示還是有些差距的，原因暫時不清楚，有指定的大佬歡迎留言

與打印有關(guān)的樣式

參考文章：打印樣式設(shè)計

分頁符

如果一次只打印一條數(shù)據(jù)還是可以的，但是如果打印多條數(shù)據(jù)，就會存在數(shù)據(jù)被切割的問題，如下圖：

為了解決這個問題，css提供了page-break-after、page-break-before、page-break-inside這三個屬性，一般只需要用到第一個即可，其他可自行百度。

page-break-after

page-break-after 屬性用于設(shè)置在指定元素后面插入分頁符。

注：

• Firefox，Chrome 和 Safari 不支持屬性值"avoid"，“left"和"right”。
• 不能對絕對定位的元素使用此屬性。

通常我們可以設(shè)置：page-break-after: always; 在每一條數(shù)據(jù)后面都添加一個分頁符，這樣打印時會保證每條數(shù)據(jù)相互獨立

@page

@page規(guī)則允許你指定頁面盒子的許多方面。例如，你想要指定頁面尺寸。下面這條規(guī)則指定默認頁面尺寸是5.5*8.5英尺。如果你想打印一本書，也許通過按需打印，找到可用尺寸很重要。

@page { size: 5.5in 8.5in; }

除了可以用長度值聲明尺寸，你還可以使用紙質(zhì)尺寸關(guān)鍵字，例如"A4"或““legal”。

@page {
  size: A4;
}

你也可以使用關(guān)鍵字來指定頁面方向 portrait（豎向的）或landscape（橫向的）。

@page { size: A4 landscape; }

使用注意： @page 不要嵌套在容器里，與其他dom無關(guān)系

默認：

修改后

@page {
    size: A3 landscape;
}

頁面左邊距和右邊距

我們可以用這些選擇器給頁面定義不同的邊距尺寸。

@page :left { margin-left: 1cm; }
@page :right { margin-left: 8cm; }

注： 測試了一下，left好像沒生效，另外還與布局是橫向還是縱向有關(guān)

規(guī)則還定義了兩個偽類選擇器。:first選擇器選中是文檔的第一頁。

@page :first {
}

:blank偽類選擇器選中任何“故意左側(cè)留白”的頁面。要添加這樣的文字，我們可以使用目標是邊距盒頂部中心的生成內(nèi)容。

@page :blank { @top-center { content: "This page is intentionally left blank." } }

注：并沒有在瀏覽器中看到任何文字，當(dāng)然也有可能是我理解的有問題

除了@top-center外，還有以下位置：

其他內(nèi)容略，自行查看參考的文章，沒有相應(yīng)的效果，不想繼續(xù)看了

總結(jié)

到此這篇關(guān)于前端使用print.js實現(xiàn)打印功能的文章就介紹到這了,更多相關(guān)前端使用print.js打印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論