鎴戣儢馃榿銆傜湅鍒癛edux鏁欑▼娴忚閲忕獊鐮翠笁涓囷紝蹇冮噷鏆楄嚜楂樺叴銆傚緢楂樺叴鎴戠殑鏂囩珷鍙互甯姪鍒板ぇ瀹躲€傝繖娆″洖褰掞紝杩樻槸缁欏ぇ瀹跺甫鏉ヤ簡涓€涓皬鏀荤暐锛屼篃鏄垜鏈€杩戝湪宸ヤ綔涓亣鍒扮殑涓€涓皬妗堜緥銆傚墠涓嶄箙锛屼骇鍝佺粡鐞嗘彁鍑鸿鍦ㄧ晫闈笂浼橀泤鐨勫睍绀篜DF鏂囨。锛岄┈涓婃湁涓ょ瀹炵幇鏂瑰紡锛氬疄鐜版柟寮忎竴锛氫娇鐢╡mbed鏍囩锛屼娇鐢ㄦ祻瑙堝櫒鑷甫鐨刾df宸ュ叿銆傝繖绉嶅疄鐜扮殑浼樼己鐐瑰緢鏄庢樉锛氫紭鐐癸細鑷甫鈥滄墦鍗扳€濄€佲€滄悳绱⑩€濄€佲€滅炕椤碘€濈瓑鍔熻兘锛屽姛鑳藉己澶э紝鏄撲簬瀹炵幇銆傜己鐐癸細涓嶅悓娴忚鍣╬df宸ュ叿椋庢牸涓嶅悓锛屼笉鑳芥弧瓒充釜鎬у寲闇€姹傦紝濡傦細绂佹鎵撳嵃銆佷笅杞界瓑銆傛垜浠殑浜у搧缁忕悊鎸戝墧馃槖锛屾墍浠?..瀹炵幇鏂规硶2浣跨敤Mozilla鐨凱DF.js鑷畾涔塒DF鐨勬樉绀恒€備笅闈㈣缁嗚涓€涓嬪湪浣跨敤PDF.js杩囩▼涓亣鍒扮殑闂銆備富瑕佸寘鎷細鍩烘湰鍔熻兘闆嗘垚浣跨敤Text-Layers娓叉煋浠€涔堟槸PDF.JSPDF.js鍩轰簬HTML5鎶€鏈瀯寤猴紝浠ュ彲绉绘鏂囨。鏍煎紡锛圥DF锛夋樉绀烘枃浠讹紝鏃犻渶瀹夎浠讳綍绗笁鏂规彃浠跺嵆鍙湪鐜颁唬娴忚鍣ㄤ腑浣跨敤-鎻掍欢銆傚熀纭€鍔熻兘鏁村悎1锔忊儯寮曠敤棣栧厛锛屽紩鐢≒DF.js鐨勬椂鍊欏嚭鐜伴棶棰樸€傚畼缃戞彁鍒伴€氳繃CDN寮曠敤鎴栬€呬笅杞芥簮鐮佸埌鏈湴銆傝€屾垜浠篃涓嶆兂姹℃煋鎴戜滑鐨刬ndex.html锛屽笇鏈涙瘡涓紩鐢ㄧ殑妗嗘灦閮芥湁涓€涓粺涓€鐨勭増鏈鐞嗐€傛墍浠ワ紝鎴戜滑鎵惧埌浜嗕竴涓寘锛歱dfjs-dist銆備娇鐢╪pminstallpdfjs-dist鎴戜滑瀵煎叆PDF.js銆傚熀鏈姛鑳藉繀椤诲弬鑰冧袱涓枃浠讹細pdf.jspdf.worker.js濡傛灉浣跨敤CDN锛屽彲浠ョ洿鎺ュ弬鑰冧互涓嬪搴旀枃浠讹細https://mozilla.github.io/pdf...https://mozilla.github.io/pdf...濡傛灉浣跨敤npm锛屽弬鑰冮渶瑕佷娇鐢≒DF.js鐨勬枃浠跺涓嬶細importPDFJSfrom'pdfjs-dist';PDFJS.GlobalWorkerOptions.workerSrc='pdfjs-dist/鏋勫缓/pdf.worker.js';杩欎袱涓枃浠跺寘鍚幏鍙栥€佽В鏋愬拰鏄剧ずPDF鏂囨。鐨勬柟娉曪紝浣嗘槸瑙ｆ瀽鍜屾覆鏌揚DF鐨勬椂闂存瘮杈冮暱锛屽彲鑳戒細闃诲鍏朵粬JS浠ｇ爜鐨勮繍琛屻€備负浜嗚В鍐宠繖涓棶棰橈紝pdf.js渚濊禆浜嶩TML5寮曞叆鐨刉ebWorkers锛岄€氳繃浠庝富绾跨▼涓Щ闄ゅぇ閲廋PU鎿嶄綔锛堜緥濡傝В鏋愬拰娓叉煋锛夋潵鎻愰珮鎬ц兘銆傛墍鏈塒DF.jsAPI閮借繑鍥炰竴涓狿romise锛屼娇鎴戜滑鑳藉浼橀泤鍦板鐞嗗紓姝ユ搷浣溿€?锔忊儯浣跨敤棣栧厛鎴戜滑闇€瑕佸湪HTML涓坊鍔?canvas>鍏冪礌鏉ユ覆鏌揚DF锛?canvasid="pdf-canvas">鐒跺悗娣诲姞js浠ｇ爜鏉ユ覆鏌揚DF锛歷arurl='Helloworld.pdf';PDFJS銆俫etDocument(url).then((pdf)=>{returnpdf.getPage(1);}).then((page)=>{//璁剧疆鏄剧ず姣斾緥varscale=1.5;//鑾峰彇pdf澶у皬varviewport=page.getViewport(scale);//鑾峰彇瑕佹覆鏌撶殑鍏冪礌varcanvas=document.getElementById('pdf-canvas');varcontext=canvas.getContext('2d');canvas.height=viewport.height;canvas.width=viewport.width;varrenderContext={canvasContext:context,viewport:viewport};page.render(renderContext);});鐜板湪锛孭DF宸茬粡鎴愬姛娓叉煋鍒扮晫闈笂浜嗐€備笅闈㈠垎鏋愪竴涓嬬敤鍒扮殑鍑芥暟锛歡etDocument()锛氱敤浜庡紓姝ヨ幏鍙朠Df鏂囨。锛屽彂閫佸涓狝jax璇锋眰鍒嗗潡涓嬭浇鏂囨。銆傚畠杩斿洖涓€涓狿romise锛孭romise鐨勬垚鍔熷洖璋冧紶閫掍竴涓寘鍚玃DF鏂囨。淇℃伅鐨勫璞★紝鍥炶皟涓殑浠ｇ爜浼氬湪PDF鏂囨。鑾峰彇瀹屾垚鍚庢墽琛屻€俫etPage()锛氱敤浜庤幏鍙朠DF鏂囨。涓殑姣忎竴椤点€俫etViewport()锛氶拡瀵规彁渚涚殑鏄剧ず姣斾緥杩斿洖PDF鏂囨。鐨勯〉闈㈠ぇ灏忋€傛覆鏌擄紙锛夛細娓叉煋PDF銆傝嚦姝わ紝鍩烘湰鍔熻兘鍛婁竴娈佃惤銆傛褰撴垜楂樺叴鐨勫噯澶囦笂绾跨殑鏃跺€欙紝浜у搧缁忕悊鍙堟彁鍑轰簡涓€涓渶姹傦細鏂囧瓧鏂囨銆傜劧楣呫€?.鎵句簡濂藉嚑閬嶅畼鏂规枃妗ｏ紝閮芥病鏈夋壘鍒板鍒舵枃鏈殑鏂规硶锛宻tackoverflow涓婁篃鏈夊緢澶氱被浼肩殑闂銆傜粡杩囦笉鏂殑灏濊瘯锛屾垜浠彂鐜颁簡Text-Layer銆備娇鐢═ext-Layers.js娓叉煋PDF鏀寔鍦ㄤ娇鐢–anvas娓叉煋鐨凱DF椤甸潰涓婃覆鏌撴枃鏈眰銆備絾鏄紝姝ゅ姛鑳介渶瑕佷袱涓檮鍔犳枃浠讹細text_layer_builder.js鍜宼ext_layer_builder.css銆傛垜浠彲浠ュ湪GitHub浠撳簱涓幏鍙栧畠銆傚鏋滄偍浣跨敤npm锛屽垯闇€瑕佽繘琛屼互涓嬪紩鐢細import{TextLayerBuilder}from'pdfjs-dist/web/pdf_viewer';瀵煎叆鈥減dfjs-dist/web/pdf_viewer.css鈥濓紱鐜板湪锛屾垜浠紑濮嬪疄鐜版枃鏈鍒跺姛鑳姐€傞鍏堬紝鍒涘缓娓叉煋闇€瑕丏OM鑺傜偣锛?divid="container">
