鍓嶈█鐢靛瓙绛惧悕涓€鑸槸鎸囬€氳繃鎶€鏈墜娈靛湪鐢靛瓙鏂囨。涓婂姞涓婄數瀛愮鍚嶏紝鍏朵綔鐢ㄧ被浼间簬鍦ㄧ焊璐ㄥ悎鍚屼笂鎵嬪啓绛惧悕鎴栧姞鐩栧叕绔犮€傚敖绠＄數瀛愮鍚嶇殑鍚堟硶鎬у骞存潵涓€鐩村鍙楄川鐤戯紝浣嗗叾骞挎硾搴旂敤浜庝紒涓氬伐浣滄祦瀹℃壒銆侀個璇峰嚱銆佹枃浠朵繚瀛樼瓑鍦烘櫙銆傛渶杩戝仛椤圭洰锛岄渶瑕佽繖鏍风殑鎵嬪啓绛惧悕锛岀敓鎴怭DF鏂囦欢銆傚疄鐜版€濊矾浣跨敤canvas瀹炵幇鎵嬪啓绛惧悕鐨勫姛鑳斤紝鐒跺悗灏哻anvas杞垚鍥剧墖绮樿创鍦ㄧ鍚嶇殑浣嶇疆锛涗娇鐢╤tml2canvas鎻掍欢灏嗛渶瑕佺敓鎴愭枃妗ｇ殑鏁翠釜dom鍖哄煙杞崲涓哄ぇ鍥撅紱浣跨敤JsPDF鎻掍欢灏嗕笂鍥剧敓鎴怭DF鏂囨。锛涘湪鏂囦欢鍐呭杈冨鐨勬儏鍐典笅锛岄渶瑕佸悎鐞嗛€夋嫨椤甸潰浣嶇疆锛涚敓鎴愮鍚?.鍦╰sx涓畾涔塩anvas娉ㄦ剰锛欳anvas鐨勫楂樺繀椤讳娇鐢╥nline鏉ュ畾涔夋牱寮忥紝鍥犱负Canvas鏍囩鏈夎嚜宸辩殑榛樿瀹藉害鍜岄珮搴?00px脳150px銆傚畠鐨勫唴鑱旀牱寮忓畾涔夌殑瀹介珮鏄粯鍥惧尯锛堢敾甯冿級鐨勫疄闄呭楂橈紝缁樺埗鐨勫浘褰㈤兘鍦ㄨ繖涓婇潰銆傚鏋滄牱寮忓閾炬枃浠朵腑瀹氫箟浜嗗楂橈紝閭ｄ箞瀹介珮灏辨槸娴忚鍣ㄤ腑娓叉煋鐨凜anvas鐨勯珮瀹姐€傚鏋滄病鏈夊湪Canvas涓洿鎺ュ畾涔夊楂樻垨鑰呮暟鍊间笉姝ｇ‘锛屽垯浼氳缃负榛樿鍊納width:300px,height:150px}銆傚洜姝わ紝濡傛灉浣犺缃甤anvas{width:200px;height:200px;}鍦ㄥ閮ㄩ摼鎺ユ枃浠朵腑鐨勬牱寮忎腑锛屼絾鏄笉鐩存帴鍦ㄧ敾甯冧笂瀹氫箟鐢诲竷瀹介珮锛岄偅涔堜綘姝ゆ椂杈撳嚭鐨刢anvas.height鍊艰繕鏄?50锛宑anvas.width鍊艰繕鏄?00锛屼篃灏辨槸鍦?00脳200鐨勫尯鍩熸覆鏌撲竴涓?50脳300鐨勭敾甯冿紝鎵€浠ュ浘鐗囦細琚媺浼稿彉褰€?.瀹氫箟绛惧悕鍑芥暟const鍐欐硶=(beginX:number,beginY:number,stopX:number,stopY:number,ctx:any,)=>{ctx.beginPath();//寮€鍚柊璺緞ctx.globalAlpha=1;//璁剧疆鍥剧墖鐨勯€忔槑搴tx.lineWidth=3;//璁剧疆绾垮ctx.strokeStyle='red';//璁剧疆璺緞棰滆壊ctx.moveTo(beginX,beginY);//浠?beginX,beginY)杩欎釜鍧愭爣鐐瑰紑濮嬬粯鍒禼tx.lineTo(stopX,stopY);//瀹氫箟浠?beginX,beginY)鍒?stopX,stopY)鐨勭嚎锛堟鏂规硶涓嶄細鍒涘缓绾匡級ctx.closePath();//鍒涘缓璺緞ctx.stroke();//瀹為檯缁樺埗鐢眒oveTo()鍜宭ineTo()鏂规硶瀹氫箟鐨勮矾寰勩€傞粯璁ら鑹蹭负榛戣壊銆倉;3銆傛敞鍐岀洃鍚簨浠秎etbeginX:number,beginY:number;甯搁噺鐢诲竷锛欻TMLCanvasElement=canvasDom.current锛沜onstctx=canvas.getContext('2d');ctx.fillStyle='#fff';ctx.fillRect(0,0,canvas.width,canvas.height);canvas.addEventListener('touchstart',function(event:any){event.preventDefault();//鍦ㄧ敾甯冧笂绛惧悕鏃堕槻姝㈤〉闈㈡粴鍔╞eginX=event.touches[0].clientX-this.offsetLeft;beginY=event.touches[0].pageY-this.offsetTop;});canvas.addEventListener('touchmove',(event:any)=>{event.preventDefault();//鍦ㄧ敾甯冧笂绛惧悕鏃堕槻姝㈤〉闈㈡粴鍔╡vent=event.touches[0];letstopX=event.clientX-canvas.offsetLeft;letstopY=event.pageY-canvas.offsetTop;writing(beginX,beginY,stopX,stopY,ctx);beginX=stopX;//杩欎竴姝ュ緢鍏抽敭锛岃捣鐐归渶瑕佷笉鏂洿鏂帮紝鍚﹀垯缁樺埗灏勭嚎绨嘼eginY=stopY;});娉ㄦ剰锛氭敞鍐屸€渢ouchstart鈥濆拰鈥渢ouchmove鈥濅簨浠讹紝闇€瑕侀樆姝㈤粯璁や簨浠讹紝鍚﹀垯椤甸潰浼氶殢鐫€鎵嬪娍涓婁笅婊戝姩銆傜Щ鍔ㄧ粓绔笂鐨勬瘡涓Е鎽镐簨浠跺璞￠兘鍖呭惈灞炴€ouches锛岀敤浜庢弿杩板睆骞曚笂鎵€鏈夋墜鎸囩殑鍒楄〃銆傝幏鍙栧綋鍓嶄簨浠跺璞★紝鎴戜滑涔犳儻浣跨敤event=event.touches[0]锛岃€屽湪PC绔垯涓嶉渶瑕佽繖鏍峰仛銆俹ffsetLeft鍊煎拰offsetTop鍊间笌鐖跺厓绱犳棤鍏筹紝鑰屾槸涓庡叾涓婂眰瀹氫綅鍏冪礌鏈夊叧锛堥櫎position:static澶栫殑鎵€鏈夊畾浣嶏紝濡俧ixed銆乺elative銆乤bsolute鍏冪礌锛夈€傚鏋滀笂灞傚畾浣嶅厓绱犻櫎浜唒osition:staice娌℃湁鍏朵粬瀹氫綅锛屽亸绉婚噺鏄浉瀵逛簬body鐨勩€傞渶瑕佹槑纭竴涓嬬Щ鍔ㄧ浜嬩欢瀵硅薄鐨勫嚑涓睘鎬э紝鈴琧lientX/clientY锛氳Е鎽镐綅缃窛绂诲綋鍓峛ody鍙鍖哄煙鐨剎,y鍧愭爣锛沺ageX/pageY锛氬浜庢暣涓〉闈紝瑙︽懜浣嶇疆璺濈body宸︿笂瑙掔殑x锛寉鍧愭爣锛寉鍧愭爣锛屽寘鎷瑂crollTop鍜宻crollLeft鐨勫€硷紱screenX/screenY锛氳Е鎽镐綅缃笌鏄剧ず灞忓乏渚у拰椤堕儴涔嬮棿鐨剎銆亂璺濈銆傛墍浠ュ湪鑾峰彇缁堢偣鍧愭爣鐨勬椂鍊欙紝濡傛灉褰撳墠椤甸潰娌℃湁婊氬姩鏉★紝鐢╟lientY鍜宲ageY鏉ヨ绠楀尯鍒笉澶с€傚鏋滈〉闈㈡瘮杈冮暱锛屾湁婊氬姩鏉★紝閭ｄ箞灏卞繀椤荤敤pageY鏉ヨ绠椼€俢lientX涔熸槸涓€鏍凤紝浣嗘槸绉诲姩绔í鍚戞粴鍔ㄧ殑鍦烘櫙閫氬父涓嶅锛屽彲浠ョ敤clientX鏉ヨ绠椼€傚湪绛惧悕锛坱ouchmove锛夌殑杩囩▼涓紝鎴戜滑闇€瑕佷笉鏂殑鏇存柊璧风偣浣嶇疆锛屽惁鍒欑敾鍑烘潵浼氭槸杩欐牱鐨勬妸绾挎鎯宠薄鎴愪竴鏉＄煭灏忕殑绾挎棣栧熬鐩告帴銆傛墍浠ユ垜涓€鐩磋涓虹紪绋嬪綊鏍圭粨搴曟槸鑰冮獙涓€涓汉鐨勬暟瀛﹁兘鍔涳紝鑰屾暟瀛﹀彲浠ュ湪浜や笌骞躲€侀€昏緫鎬濈淮銆佺畻娉曚腑鐪嬪埌銆傛渶鍚庣敓鎴愮鍚嶅涓嬶細鐢熸垚PDF鏂囨。html2canvas鏄竴涓皢HTML浠ｇ爜杞垚Canvas鐨勬彃浠讹紝鎵€浠ラ渶瑕佺敤div鍖呰９瑕佹墦鍗扮殑鍐呭鍖哄煙锛岃幏鍙杁om鑺傜偣銆俬tml2Canvas(dom,{allowTaint:true,width:dom.offsetWidth,//璁剧疆鑾峰彇鐨勭敾甯冨搴eight:dom.offsetHeight,//璁剧疆鑾峰彇鐨勭敾甯冮珮搴:0,//椤甸潰姘村钩鏂瑰悜婊氬姩鐨勮窛绂粂:0,//椤甸潰鍦ㄥ瀭鐩存柟鍚戞粴鍔ㄧ殑璺濈})娉ㄦ剰锛氳繖閲岄渶瑕佽缃畐idth,height鍜寈,y锛屽惁鍒欏綋椤甸潰鍐呭鍙湁涓€椤垫椂娌℃湁闂锛屼絾鏄鏋滈〉闈㈠唴瀹规湁寰堝椤碉紝浼氬嚭鐜扮敓鎴愮殑鍥剧墖鍙湁涓€灏忛儴鍒嗘湁鍐呭鐨勭幇璞°€傞棶棰樺嚭鍦ㄨ繖涓厤缃弬鏁颁笂銆傚鏋滀笉璁剧疆瀹介珮锛屽垯榛樿鍙彇褰撳墠瑙嗗彛鐨勫唴瀹癸紝瓒呭嚭褰撳墠瑙嗗彛鐨勫叾浠栧唴瀹瑰皢琚涪寮冦€傝缃墦鍗板弬鏁帮細constprint=()=>{letdom:HTMLElement=pdfDom.current;html2Canvas(dom,{allowTaint:true,width:dom.offsetWidth,//璁剧疆鑾峰彇鐨勭敾甯冨搴eight:dom.offsetHeight,//璁剧疆鑾峰彇鐨勭敾甯冮珮搴:0,//椤甸潰姘村钩鏂瑰悜y婊氬姩璺濈:0,//椤甸潰鍨傜洿鏂瑰悜婊氬姩璺濈}).then((canvas:HTMLCanvasElement)=>{letcanvasWidth=canvas.width;letcanvasHeight=canvas.height;letpageHeight=(canvasWidth/592.28)*841.89;//涓€椤礎4pdf鍙互鏄剧ず鐨勭敾甯冮珮搴etimgWidth=595.28;//璁剧疆鍥剧墖鐨勫搴︾瓑浜嶢4绾哥殑瀹藉害letimgHeight=(592.28/canvasWidth)*canvasHeight;//绛夋瘮渚嬭浆鎹负A4绾哥殑楂樺害lettotalHeight=imgHeight;//寰呮墦鍗板浘鐗囨€婚珮搴︼紝鍒濆鐘舵€佺瓑浜庡浘鐗囬珮搴etpageData=canvas.toDataURL('image/png',1.0);letPDF=newJsPDF('p','pt','a4',true);if(totalHeight0){PDF.addImage(pageData,'JPEG',0,top,imgWidth,imgHeight);//浠庡浘鍍忛《閮ㄥ紑濮嬫墦鍗板埌椤堕儴浣嶇疆totalHeight-=pageHeight;椤堕儴-=841.89锛沬f(totalHeight>0){PDF.addPage();}}}PDF.save('test.pdf');});};閫夋嫨鍒嗛〉浣嶇疆鎸夌収涓婇潰鐨勬楠ょ敓鎴愪竴涓狿DF鏂囨。锛屼絾鏄綋PDF鐨勯〉闈㈠緢澶氱殑鏃跺€欙紝灏变細鍑虹幇杩欐牱鐨勯棶棰樷彫鍙互鐪嬪埌锛屽垎椤电殑鏃跺€欐枃鏈鎳掓儼鎴柇浜嗐€傝繖鏄剧劧涓嶆槸鎴戜滑鎯宠鐪嬪埌鐨勬晥鏋溿€傚浣曡В鍐宠繖涓棶棰樺憿锛燄煠斿鏋淧DF鏂囨。鐨勯〉鏁拌緝灏戯紝鍙互鍦ㄥ紑鍙戞祴璇曠殑鏃跺€欏湪鍒嗛〉鐨勫湴鏂归鍏堟彃鍏ヤ竴涓猵adding锛屼篃灏辨槸鎻愬墠棰勭暀鍒嗛〉鐨勪綅缃€侾DF鏂囨。涓殑椤垫暟寰堝ぇ銆傚湪杩欑鎯呭喌涓嬶紝浣滆€呭皾璇曢亶鍘嗚鎵撳嵃鐨刣om鑺傜偣瀛愯妭鐐癸紝灏嗘瘡椤靛彲浠ユ墦鍗扮殑dom鑺傜偣鐨勯珮搴﹀姞璧锋潵锛屽鏋滆秴杩囬〉闈㈠彲浠ユ壙杞界殑鏈€澶ч珮搴︼紝鍒欏湪鏈€鍚庢坊鍔爌adding鑺傜偣锛屾墦鍗板悗鎭㈠鏍峰紡銆傝繖绉嶆柟寮忔槸闈炲父鑰楁€ц兘鐨勶紝鍥犱负闇€瑕佽绠楁瘡涓猟om鑺傜偣鐨勯珮搴︼紝杩橀渶瑕侀〉闈笂鐨刣om鍏冪礌鐨勭矑搴︽洿缁嗐€備笉鐒朵竴椤典細鍑虹幇涓€澶х墖绌虹櫧锛屽畬鍏ㄦ棤娉曟ā鎷焪ord鐢熸垚pdf鐨勬晥鏋溿€傛墍浠ヤ笉鍐嶈璁恒€傚鏋滄湁璇昏€呮湁鏇村ソ鐨勮В鏀炬柟妗堬紝杩樿涓嶅悵璧愭暀锛岃阿璋鉂わ笍
