鏈懆鏂伴渶姹傛潵浜嗭紝闇€瑕佸墠绔敓鎴愭墦鍗板唴瀹广€傛瘡涓€椤规暟鎹崰鐢ㄤ竴寮燗4绾搞€傚鏋滈€夋嫨澶氶」锛岄渶瑕佸垎澶氬紶鎵撳嵃锛屾墍浠ラ渶瑕佹墦鍗版寚瀹氬唴瀹瑰尯鍩燂紝浣跨敤page-break鎺у埗鎵撳嵃鍖哄煙鐨勫垎椤点€備互鍓嶆垜鍙槸鐢–SS鏉ユ帶鍒舵墦鍗版牱寮忥紝闅愯棌涓€浜涗笉闇€瑕佹墦鍗扮殑鍖哄煙銆備粠鏉ユ病鏈夊皾璇曡繃鎵撳嵃鎸囧畾鍖哄煙鐨勫唴瀹瑰拰鎺у埗鎵撳嵃鍐呭鐨勫己鍒跺垎椤碉紝璁板綍涓€涓嬨€傛嵁鎴戞墍鐭ワ紝閫夋嫨鎵撳嵃鍖哄煙鐨勫眬閮ㄦ墦鍗版湁浠ヤ笅涓夌鏂瑰紡锛氶€氳繃寮€濮嬪拰缁撴潫鏍囩鏉ユ帶鍒舵墦鍗拌寖鍥达紱鍜?!--endprint-->閫氳繃灏嗛儴鍒嗗唴瀹硅祴鍊肩粰body锛屾墦鍗版暣涓〉闈紝鐒跺悗鍙嶅瑕嗙洊鍘熼〉闈㈠唴瀹癸紱閫氳繃鍔ㄦ€佸垱寤?iframe>杩涜鎵撳嵃锛泈indow.print()涓夌鏂瑰紡鐨勯儴鍒嗘墦鍗扳€斺€旂璋峰伐鍏蜂汉鎺ㄨ崘绗竴绉嶅拰绗笁绉嶆柟寮忋€備絾鏄垜閫夋嫨鍦∟PM涓婃壘浜嗕竴涓幇鎴愮殑杞瓙馃榿銆傚叾瀹炰笉鏄垜鎵剧殑銆傚叾瀹炰箣鍓嶆湅鍙嬪凡缁忓畬鎴愪簡閮ㄥ垎鎵撳嵃鍔熻兘锛屼絾鏄悗鏉ュ張鎻愬嚭浜嗘柊鐨勯渶姹傦紝杩欐瑕佹眰鎵撳嵃鍐呭鐨勬牱寮忥紝鎵€浠ユ垜灏辨帴鎵嬩簡銆傛垜閫夋嫨鐨勫簱鏄痸ue-print-nb銆傜湅浜嗕笅婧愮爜锛屽畠鐨勫疄鐜版柟寮忓氨鏄笂闈㈣鐨勭涓夌銆傞鍏堥€氳繃documentCreateElement('iframe')鍒涘缓涓€涓?iframe>鍏冪礌锛涚劧鍚庨€氳繃document.getElementById()鑾峰彇寰呮墦鍗板尯鍩熺殑鍐呭锛岄€氳繃Node.cloneNode()iframe>灏嗗緟鎵撳嵃鍖哄煙鐨勫唴瀹瑰鍒跺埌鍒涘缓鐨?iframe>涓紱鏈€鍚庝娇鐢╳indow.print()API鎵撳紑鎵撳嵃瀵硅瘽妗嗘墦鍗板綋鍓嶆枃妗ｏ紝鍗冲彲鎵撳嵃鍘熸潵鎸囧畾鍖哄煙鐨勫唴瀹广€傛洿璇︾粏鐨勬柟娉曞彲浠ユ煡鐪嬩粨搴撴簮鐮佹垨鑰呭湪鏂囨湯鍙傝€冭祫婧愪腑鏌ョ湅瀵瑰簲鏂囩珷銆傛垜涓嶄細鍦ㄨ繖閲屽涔犲拰閿€鍞€傞厤缃〉闈㈡墦鍗版牱寮廋SS鐨凘page瑙勫垯鍙互鎺у埗鎵撳嵃鏃剁殑椤甸潰鏍峰紡锛屼絾鏄彲閰嶇疆鐨勫唴瀹逛笉澶氥€侤page瑙勫垯鐢ㄤ簬鍦ㄦ墦鍗版枃妗ｆ椂淇敼鏌愪簺CSS灞炴€с€傛偍涓嶈兘浣跨敤@page瑙勫垯淇敼鎵€鏈塁SS灞炴€э紝鍙兘淇敼鏂囨。鐨勮竟璺濄€佸鍎裤€佸濡囧拰鍒嗛〉绗︺€傚鍏朵粬灞炴€х殑淇敼鏃犳晥銆侤page-MDN鎴戞殏鏃跺彧鑳戒娇鐢ㄨ竟璺濄€佸ぇ灏忓拰鍒嗛〉绗︺€傜敤娉曞緢绠€鍗曪紝鍜屾櫘閫欳SS涓€鏍凤紝渚嬪锛欯page{margin:1cm;//璁剧疆鎵撳嵃椤佃竟璺濓紱灏哄锛欰4绾靛悜锛?/鎸囧畾鎵撳嵃鏃剁殑绾稿紶澶у皬鍜屾柟鍚慴reak-after:page;//鍒嗛〉灞炴€@page瑙勫垯鍙互鐞嗚В涓烘墦鍗版椂瑕佽缃殑瀵硅薄锛屽拰@mediaprint涓嶅お涓€鏍枫€傚綋鎴戝皾璇曚娇鐢╯ize锛堝埆鍚嶏級鎸囧畾绾稿紶澶у皬鏃讹紝Chrome銆丗ireFox鍜孍dge涓嶈捣浣滅敤銆傚彲浠ユ寚瀹氱焊寮犳柟鍚戙€備娇鐢ㄥ埆鍚嶆寚瀹氱焊寮犲昂瀵告椂锛孍dge鐢氳嚦浼氬奖鍝峬argin灞炴€х殑鏁堟灉锛屾墍浠ユ渶濂藉彧鎸囧畾灏哄鐨勬柟鍚戯紙2022骞?7鏈?5鏃ワ級銆備娇鐢ㄧ壒瀹氬€兼寚瀹氱焊寮犲ぇ灏忔椂锛屽湪Chrome鍜孎ireFox涓寚瀹氱焊寮犳柟鍚戜笉鍐嶆湁鏁堬紙2022骞?鏈?5鏃ワ級銆傚彧闇€閰嶇疆椤甸潰鎵撳嵃鏍峰紡锛岀劧鍚庡紑濮嬬紪鍐欐墦鍗板唴瀹规牱寮忋€傚洜涓鸿兘閰嶇疆鐨勫睘鎬х湡鐨勪笉澶氾紝鑰屼笖鍚勪釜娴忚鍣ㄧ殑鏀寔绋嬪害涔熸槸鍙傚樊涓嶉綈銆傚鏋滄槸楂樺害瀹氬埗鍖栫殑锛屽緢瀹规槗鎶婅嚜宸卞皝闂捣鏉ャ€傞〉闈㈠唴瀹规牱寮忕殑鍐呭灏辨槸姝ｅ父鍐機SS鏍峰紡銆備竴浜涚壒娈婄殑鏍峰紡鍙互鍦ㄦ墦鍗扮殑鏃跺€欓厤鍚園mediaprint銆傚ぇ瀹跺彲浠ュ湪璋冩暣鐨勬椂鍊欎娇鐢ㄦ祻瑙堝櫒鐨勬墦鍗伴瑙堝姛鑳芥煡鐪嬪疄闄呮晥鏋滐紝杩欓噷灏变笉璧樿堪浜嗐€傚鏋滈€愰〉鎵撳嵃鐨勫唴瀹规槸閫愰〉鐨勶紝灏变娇鐢ㄤ笂闈㈡彁鍒扮殑鍒嗛〉锛屽鍗犳嵁鏁翠釜椤?鍧楀尯鍩熺殑鍐呭鍔犱笂break-before鎴朾reak-after灞炴€с€備篃鍙互灏唒age-break灞炴€ф坊鍔犲埌鍗曚釜姘村钩鍏冪礌锛屽
銆傜劧鍚庡湪鎵撳嵃鐨勬椂鍊欎娇鐢ˊmediaprint闅愯棌妯嚎锛岃繖鏍风湅椤甸潰鐨勬椂鍊欏氨鐭ラ亾鍝簺閮ㄥ垎浼氳鍒嗛〉锛屾墦鍗扮殑鏃跺€欎笉浼氳鎵撳嵃鍐呭鐨勬帓鐗堟墍鎵撳姩銆傛敞鎰忥細濡傛灉鎯冲湪鎵撳嵃鏃堕殣钘?hr/>鍏冪礌锛屽悓鏃朵繚鐣欏垎椤靛姛鑳斤紝闇€瑕佷娇鐢╲isibility:hidden;瑕侀殣钘忓畠锛屼綘涓嶈兘浣跨敤display:none鍚﹀垯pagination灞炴€у皢涓嶄細鐢熸晥銆傪煉ラ亣鍒扮殑闂1.浣跨敤page-break-after鏄唴瀹瑰垎椤典絾鏄墦鍗扮殑鏃跺€欎笉鐢熸晥锛屽洜涓簆age-break-after琚玝reak-after浠ｆ浛浜嗐€傜浉搴旂殑page-break-before涔熻break-before灞炴€ф墍鍙栦唬銆備篃鍙兘鏄綘鐨勫€艰缃敊浜嗭紝璁剧疆鎴恜age鍗冲彲銆傚父瑙勪腑鏂€兼湁锛歛uto銆乤void銆乤lways銆乤ll锛涚敤浜庡垎椤电殑鍊兼湁锛歛void-page,page,left,right,recto,versa锛涚敤浜庡垪鍒掑垎鐨勫€兼湁锛歛void-column,column;鐢ㄤ簬鍒嗗尯鐨勫€兼湁锛歛void-region,region锛涖€奀SS鏂颁笘鐣屻€嬬湅鍒板紶鏂版棴鑰佸笀璇寸幇浠ｆ祻瑙堝櫒宸茬粡涓嶆敮鎸佸湴鍩熺浉鍏崇殑灞炴€т簡锛屽彲浠ュ拷鐣ャ€?.璁剧疆鐨勮儗鏅壊娌℃湁鎵撳嵃鍑烘潵銆傚洜涓洪粯璁ゆ墦鍗伴〉闈㈡槸涓轰簡鐪佸ⅷ锛屾墍浠ラ粯璁や笉鎵撳嵃搴曡壊銆傚鏋滄兂鍦ㄦ墦鍗版椂淇濈暀鑳屾櫙棰滆壊锛屽彧鑳戒娇鐢╟olor-adjust灞炴€ф潵鎺у埗銆備絾鏄痗olor-adjust灞炴€т笉鏄爣鍑嗗睘鎬э紝鎵€浠ヤ娇鐢ㄦ椂闇€瑕佹鏌ュ悇涓祻瑙堝櫒鐨勫吋瀹规€с€備竴浜涙祻瑙堝櫒闇€瑕佹坊鍔犵鏈夊墠缂€锛堜緥濡?webkit-print-color-adjust锛夈€?銆佹墦鍗伴〉闈㈡椂锛屽湪鎵撳嵃棰勮绐楀彛涓€夋嫨浜嗗僵鑹叉ā寮忥紝浣嗗疄闄呮墦鍗板嚭鏉ョ殑杩樻槸榛戠櫧鐨勩€傞鑹叉ā寮忔槸鍦ㄦ祻瑙堝櫒寮瑰嚭鐨勬墦鍗伴瑙堜腑璁剧疆鐨勶紝骞朵笉涓€瀹氭剰鍛崇潃鎵撳嵃鏈哄湪鍋忓ソ璁剧疆涓缃负褰╄壊銆傚彲浠ユ墦寮€瀵瑰簲鐨勬墦鍗版満鏌ョ湅鍋忓ソ璁剧疆涓殑鑹插僵妯″紡鏄惁涓哄僵鑹层€傚叿浣撴楠や负锛氬湪寮瑰嚭鐨勬墦鍗伴瑙堢獥鍙ｄ腑鐐瑰嚮浣跨敤绯荤粺瀵硅瘽妗嗘墦鍗帮紱濡傛灉娌℃湁姝ら」锛屽彲浠ュ湪娴忚鍣ㄤ腑浣跨敤Ctrl+Shift+P缁勫悎閿紝鍦ㄥ脊鍑虹殑鎵撳嵃绐楀彛涓墦寮€瀵瑰簲鐨勬墦鍗版満璁惧锛岀偣鍑籔references锛涢€夋嫨绾稿紶/杈撳嚭鍗★紝鎵惧埌棰滆壊妯″紡锛屾敼鎴愬僵鑹诧紱鏈€鍚庣偣鍑荤‘瀹氫繚瀛樺苟搴旂敤璁剧疆锛岀劧鍚庣偣鍑绘墦鍗板皾璇曟墦鍗帮紱鍒板ご鏉ワ紝寰堝鎵撳嵃鐩稿叧鐨勮鍒欏拰API杩樻槸鑽夌锛屽緢澶氳鍒欏苟娌℃湁鎴愪负鏍囧噯锛屼笉鍚岀殑娴忚鍣ㄤ篃鏈夎嚜宸辩殑瀹炵幇鏂瑰紡銆傛煇浜涘睘鎬т粛鐒堕儴鍒嗗彈鏀寔锛堜緥濡傦細澶у皬灞炴€э級鎴栭渶瑕佺鏈夊墠缂€銆傚敖閲忓厛鏌ョ湅鏈€鏂扮殑鏂囨。锛屼笉瑕佸鍒剁瑪璁版垨鑰呮枃绔狅紝鍥犱负娌′汉鐭ラ亾浠€涔堟椂鍊欎細鍙樸€傚啓杩欑瘒绗旇鐨勬椂鍊欑湅鍒拌崏绋跨殑淇敼鏃堕棿鏄?022骞?鏈?4鏃ワ紝涓嶇煡閬撳ぇ瀹剁湅浜嗘病鏈夛紝鍒扮殑鏃跺€欎細鏄墠鍑犱釜鐗堟湰銆傚氨杩欐牱鍚э紝涓婇潰銆傪煋氬弬鑰冩枃浠禤agedmedia-CSS|MDN@椤甸潰-CSS|MDNsize-CSS|MDN鍒嗛〉鍚?CSS|MDNbreak-after-CSS|MDN鎵撳嵃棰滆壊璋冩暣-CSS|MDNwindow.print-缃戠粶API|MDNSS鍒嗛〉濯掍綋妯″潡绾у埆3|W3C缂栬緫鑽夌page-break|CSS-Tricks-CSS-Tricks鎴戝彲浠ュ湪HTML鎵撳嵃涓己鍒跺垎椤靛悧锛?灞€閮ㄦ墦鍗扮殑涓夌鏂瑰紡-纭呰胺宸ュ叿浜?鍗氬鍥瓀indow.print()鎵撳嵃鏃舵牴鎹〉闈㈤珮搴﹁缃眳涓樉绀猴紝璁剧疆鎵撳嵃甯冨眬锛堢珫鎺掞紝妯帓锛塡_QingyunQingyun鐨勫崥瀹?CSDN鍐欎綔鎸戞垬璧涳紝娆㈣繋闃呰鐨勪綘鍔犲叆銆?/p>