vue利用print-js打印原生表格

568 阅读1分钟

如下圖所示,打印内容是整個頁面

圖一是print-js的api
圖二是打印的結果
圖三是代碼
圖四是原生table的code

1.踩坑:不建議使用elementUI的elTable。因爲使用了print-js的api的css(可傳入單個css文件),scanStyles(設置為false,原本的css樣式將會失效),這就意味著使用了elTable,要在我自己的css中導入elTable的内置樣式。

2.實踐出真理(查看圖四):因爲要根據設計稿分配每列的寬度,所以用到表格的th的width屬性進行百分比分配,第一行的寬度分配,後面行會根據第一行對齊。然後還需要在td,th加允許換行即可 td,th{ word-wrap:break-word//在長單詞或者url地址内部進行換行 break-word:break-all //允許在單詞内換行 }

2.實踐發現新大陸:采用原生table寫法,需要完整寫上table的各個標簽,例如thead,tbody,tfoot等。 這樣在打印結果上,在分頁情況下,自動將表頭和表尾循環。(之前使用div實現表格。哭死)

3.由於箭頭采用了element的icon,後面自己實現箭頭的做法 #code{ width:0; height:0; border:6px solid transparent; border-right-color:red;//左箭頭 border-left-color:red;//右箭頭 }

----end, 下一章特意講講table的坑。

printApi.png printPre.png

printCode.png printTbale.png