|
前言 項目中經(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; 1 2 3 4 5 6 7 8 如何使用 聲明打印區(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> 1 2 3 4 5 調(diào)用打印方法 vue2 項目 //main.js import Print from './print'; Vue.use(Print); // xx.vue this.$print(this.$refs.printDom, {}); 1 2 3 4 5 6 vue3項目，在需要使用的頁面，引入方法，然后方法調(diào)用。 聲明不打印區(qū)域 聲明"no-print"類名 ，此時print方法中，不需要特意聲明，默認(rèn)會剔除.no-print區(qū)域 <div class="no-print">不打印區(qū)域</div> Print('#printDom'); 1 2 自定義類名，此時需要在print方法中通過"noPrint"屬性指定不打印區(qū)域 <div class="no-print-box">自定義不打印區(qū)域類名</div> Print('#printDom',{noPrint:'.no-print-box'}); 1 2 3 參數(shù)說明 this.$print(this.$refs.printDom, { noPrint: '.noPrint', onStart: () => { console.log('打印開始'); }, onEnd: () => { onsole.log('打印完成'); } }); 1 2 3 4 5 6 7 8 9 樣式 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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 但是實際在瀏覽器里的顯示還是有些差距的，原因暫時不清楚，有指定的大佬歡迎留言 與打印有關(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è)置在指定元素后面插入分頁符。 值 描述 auto 默認(rèn)。如果必要則在元素后插入分頁符。 always 在元素后插入分頁符。 avoid 避免在元素后插入分頁符。 left 在元素之后足夠的分頁符，一直到一張空白的左頁為止。 right 在元素之后足夠的分頁符，一直到一張空白的右頁為止。 注： Firefox，Chrome 和 Safari 不支持屬性值"avoid"，“l(fā)eft"和"right”。 不能對絕對定位的元素使用此屬性。 通常我們可以設(shè)置：page-break-after: always; 在每一條數(shù)據(jù)后面都添加一個分頁符，這樣打印時會保證每條數(shù)據(jù)相互獨立 @page @page規(guī)則允許你指定頁面盒子的許多方面。例如，你想要指定頁面尺寸。下面這條規(guī)則指定默認(rèn)頁面尺寸是5.5*8.5英尺。如果你想打印一本書，也許通過按需打印，找到可用尺寸很重要。 @page { size: 5.5in 8.5in; } 1 除了可以用長度值聲明尺寸，你還可以使用紙質(zhì)尺寸關(guān)鍵字，例如"A4"或““l(fā)egal”。 @page { size: A4; } 1 2 3 你也可以使用關(guān)鍵字來指定頁面方向 portrait（豎向的）或landscape（橫向的）。 @page { size: A4 landscape; } 1 使用注意： @page 不要嵌套在容器里，與其他dom無關(guān)系 默認(rèn)： 修改后 @page { size: A3 landscape; } 1 2 3 頁面左邊距和右邊距 我們可以用這些選擇器給頁面定義不同的邊距尺寸。 @page :left { margin-left: 1cm; } @page :right { margin-left: 8cm; } 1 2 注： 測試了一下，left好像沒生效，另外還與布局是橫向還是縱向有關(guān) 規(guī)則還定義了兩個偽類選擇器。:first選擇器選中是文檔的第一頁。 @page :first { } 1 2 :blank偽類選擇器選中任何“故意左側(cè)留白”的頁面。要添加這樣的文字，我們可以使用目標(biāo)是邊距盒頂部中心的生成內(nèi)容。 @page :blank { @top-center { content: "This page is intentionally left blank." } } 1 注：并沒有在瀏覽器中看到任何文字，當(dāng)然也有可能是我理解的有問題 除了@top-center外，還有以下位置： 其他內(nèi)容略，自行查看參考的文章，沒有相應(yīng)的效果，不想繼續(xù)看了 ———————————————— 版權(quán)聲明：本文為CSDN博主「無知的小菜雞」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/weixin_41897680/article/details/124797673 |
|
|
