|
y∩__∩y 歸來 于 2022-06-10 15:16:43 發(fā)布 1366 收藏 7 分類專欄： JavaScript 文章標(biāo)簽： 前端 javascript typescript 版權(quán) JavaScript 專欄收錄該內(nèi)容 6 篇文章0 訂閱 訂閱專欄 打印功能實(shí)現(xiàn) 效果預(yù)覽 
目錄 打印功能實(shí)現(xiàn) 效果預(yù)覽 一、html 寫法 二、js或ts寫法 總結(jié) 一、html 寫法 <div id="exportableTable" style="display: none;"> <table border="1" style="border-collapse:collapse;width: 100%;text-align: center;"> <tr rowspan="2"> <!-- 表頭 --> <th colspan="7">經(jīng)費(fèi)賬(科目：)</th> </tr> <tr cospan="7"> <!-- 表頭 --> <th rowspan="2">日期</th> <th rowspan="1">憑證</th> <th rowspan="2">摘要</th> <th rowspan="2">收方</th> <th rowspan="2">付方</th> <th rowspan="2">收或付</th> <th rowspan="2">余額</th> </tr> <tr cospan="7"> <!-- 表頭 --> <th rowspan="1">順序號</th> </tr> <!-- 行 --> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </table> </div> 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 二、js或ts寫法 代碼如下（示例）： printFee () { const printContent = document.getElementById("exportableTable"); // window.open() 彈出窗口 const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//彈出一個空的窗口（設(shè)置好寬高） // write()方法用于寫入文檔內(nèi)容，可以傳多個參數(shù)，寫入的字符串會按HTML解析 WindowPrt.document.write(printContent.innerHTML); // 運(yùn)行document.write()，運(yùn)行完后，最好手動關(guān)閉文檔寫入document.close() WindowPrt.document.close(); //方法將焦點(diǎn)設(shè)置到當(dāng)前窗口，也就是將窗口顯示在前（靠近屏幕） WindowPrt.focus(); // 調(diào)用 print() 方法會產(chǎn)生一個打印預(yù)覽彈框，讓用戶可以設(shè)置打印請求。 WindowPrt.print(); // window.close()關(guān)閉瀏覽器窗口 WindowPrt.close(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 總結(jié) 關(guān)鍵在于html要使用 id='exportableTable’ ， js通過document.getElementById(“exportableTable”)將要打印的內(nèi)容獲取， 通過.write(）寫入文檔內(nèi)容到新彈出的窗口， 再調(diào)用 print() 方法產(chǎn)生一個打印預(yù)覽彈框，即可實(shí)現(xiàn)打印 ———————————————— 版權(quán)聲明：本文為CSDN博主「y∩__∩y 歸來」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/qq_43730595/article/details/125221010 |
|
|
