需求通過編寫前端頁面實現多次打印。記下要點。
1. 分頁
css自帶分頁樣式： page-break-after: always；page-break-before：always。
在某些打印工具下可能會出現空白頁。我遇到的情況是，每個頁面的包裹div和頁面差不多大，加上分頁符就多了一頁。我把頁面包裹div高度減少，這樣每頁內容不變高度減少都加上分頁也沒問題。可以試試控制最后一頁不加分頁樣式，我記得我沒成功。
2.打印插件 vue-print-nb
我使用vue寫的頁面，最開始使用 vue-print-nb 打印插件，用起來很方便，把需要打印的內容放id在 一個用v-print觸發就好。<button v-print="'#printMe'">Print local range</button>
但是除了新版chrome外，使用系統打印工具的瀏覽器都不能設定好打印樣式，不能縮放等，所以放棄了。
后來改用lodop，這是付費插件，好在公司買過了。
3.lodop
lodop可以使用自帶指令編寫打印內容，但是我建議使用html的方式，畢竟最為前端，使用起來方便靈活點。
（1）官網下載軟件包和文檔。軟件包有三個安裝包一個初始化js和一堆示例。
chrome和火狐吧用需要安裝第一個，IE區分32和64位，引入第四個文件 LodopFuncs.js后頁面會提示。
（2）官方推薦使用 LodopFuncs.js，但是在使用之前需要對這個js進行改造。
首先，需要把外部需要使用的 getLodop() 暴露出去，只需要在最后 export default getLodop，然后在vue里import一下就可以使用了： import getLodop from './LodopFuncs'。
其次，最好修改一下提示的文件地址，或者按需刪除地址修改提示。
我的這個項目引用element，由於提示采取js拼接dom的方式，出現提示頁面就會卡死，我引用MessageBox ： import { MessageBox } from 'element-ui'; 通過MessageBox 進行提示，解決問題。
最后，在js最后添加注冊號，官方就是個坑，官方紅字地方的代碼復制下來不能用，下圖標示的地方下划線應該是 _ 一個，而那地方是 __ 兩個，刪一個~~~~
（3) 使用lodop，代碼如下。
lodop() { LODOP = getLodop(); if (LODOP) { //獲取css字符串 采用js傳入 var strBodyStyle = `<style>${strStyle}</style>` //拼接超文本 var strFormHtml = strBodyStyle + "<body>" + document.getElementById("printTest").innerHTML + "</body>"; LODOP.PRINT_INIT("打印綜合二維碼面單"); //添加打印 LODOP.ADD_PRINT_HTM(0, '1mm', '120mm', '200mm', strFormHtml); //設置預覽界面預覽顯示模式和大小 0為適高 LODOP.SET_PREVIEW_WINDOW(0, '', '', '600', '800', ''); //設置打印 縮放比例 LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", '50%'); //設置打印請求結束后自動關閉預覽 LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", true); // 預覽 LODOP.PRINT();為直接打印 LODOP.PREVIEW(); } }
### 遇到一個問題是，css不能加載。沒有樣式，這就很酸爽了， vue-print-nb就不存在這個問題。官方提供方法：
//獲取<style id="style1">的內容拼接 var strBodyStyle="<style>"+document.getElementById("style1").innerHTML+"</style>"; var strFormHtml=strBodyStyle+"<body>"+document.getElementById("form1").innerHTML+"</body>"; //直接寫樣式內容 拼接 var strBodyStyle="<style>table,td { border: 1 solid #000000;border-collapse:collapse }</style>"; var strFormHtml=strBodyStyle+"<body>"+document.getElementById("form1").innerHTML+"</body>"; //獲取外部樣式拼接 var strStyleCSS="<link href='PrintSample10.css' type='text/css' rel='stylesheet'>"; var strFormHtml="<head>"+strStyleCSS+"</head><body>"+document.getElementById("form1").innerHTML+"</body>";
第一三的方法很好，但不知什么原因我沒成功~~~~~~~~~~~
然后只好使用第二種方法，但是直接在邏輯代碼里寫css字符串顯得有點怪怪的，所以我復制所有css內容放在另一個js文件里然后用``包裹成字符串，然后 export 出去，在打印邏輯引用就好了。用``包裹嗨可以保留css結構。
### 其他問題比如需要設置縮放什么的，前面的代碼都有，也寫了注釋。
4. 另外打印二維碼使用 jrQrcode，條形碼使用 JsBarcode，使用都很簡單。
JsBarcode是生成Base64，純數據，可以在獲取打印數據的地方直接使用，而jrQrcode需要獲取dom，需要dom渲染完成才能使用。vue使用this.$nextTick(() => { fun() })。
lodop打印也是需要獲取dom，也需要使用this.$nextTick(() => { fun() })。