鍓嶈█锛氬湪鏃ュ父鐨勫墠绔紑鍙戜腑锛宼oC涓氬姟闅惧厤浼氭湁涓€浜涙埅鍥炬垨鑰呯敓鎴愭捣鎶ョ殑涓氬姟闇€姹傚彈闄愪簬html2canvas鐨勪笉鍏煎锛屾垨鑰卌anvas鐨勬牱寮廳rawingLimitations锛岀幇鍦ㄦ垜浠湁浜嗕竴涓柊鐨勮В鍐虫柟妗堬紝node+puppeteer鐨勭粍鍚堬紝puppeteerpuppeteer鍒濊瘑Puppeteer鏄疓oogleChrome鍥㈤槦鐨勫畼鏂规棤澶达紙headless锛塁hrome宸ュ叿銆侰hrome鏄祻瑙堝櫒甯傚満鐨勯瀵艰€咃紝ChromeHeadless灏嗘垚涓虹綉缁滃簲鐢ㄨ嚜鍔ㄥ寲娴嬭瘯鐨勮涓氭爣鏉嗐€傞偅涔堟垜浠彲浠ョ敤puppeteer鍋氫粈涔堝憿锛熺敓鎴愰〉闈㈢殑灞忓箷鎴浘鎴朠DF浠ヨ嚜鍔ㄦā鎷熺敤鎴疯涓恒€佽〃鍗曟彁浜ゃ€佹寜閽偣鍑荤瓑銆傚垱寤鸿嚜鍔ㄥ寲娴嬭瘯鐜浠ユ崟鑾风珯鐐圭殑鏃堕棿绾胯窡韪互甯姪璇婃柇鎬ц兘闂銆傛姄鍙朣PA椤甸潰骞舵墽琛岄娓叉煋锛堝嵆鈥淪SR鈥濓級銆傚彲浠ョ湅鍑虹涓€涓壒寰佹寮忔槸鎴戜滑浣跨敤鐨刾uppeteer銆俰nstallnpminstallpuppeteer//涓嬭浇鍐呮牳姝ラ鍙兘浼氬け璐ャ€傜綉涓奵npm鎴杙uppeteer鐨勪富瑕乤pi鍙粙缁嶆埅鍥撅紝濡傞渶鍏朵粬鍔熻兘鏌ヨ锛岃绉绘锛歨ttps://github.com/puppeteer/...1.鍚姩瀹炰緥import*aspuppeteerfrom'puppeteer'(async()=>{awaitpuppeteer.launch()})()2銆傜綉椤垫埅鍥緋ngscreenshotawaitpage.setViewport({width,height})awaitpage.goto(url)//瀵规暣涓〉闈㈣繘琛屾埅鍥綼waitpage.screenshot({path:path.resolve(`./screenshot/${fileName}.png`),//鍥剧墖淇濆瓨璺緞type:'png',fullPage:false//杈规粴鍔ㄨ竟鎴浘})涓嶄粎濡傛锛岃繕瑕佹ā鎷熸墜鏈虹殑璁惧鐜import*aspuppeteerfrom"puppeteer";import*asdevicesfrom"puppeteer/DeviceDescriptors";constiPhone=devices["iPhone6"];(async()=>{constbrowser=awaitpuppeteer.launch({headless:false});constpage=awaitbrowser.newPage();awaitpage.emulate(iPhone);awaitpage.goto("https://baidu.com/");awaitbrowser.close();})();pdfscreenshot(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto("https://example.com/");awaitpage.pdf({displayHeaderFooter:true,path:'example.pdf',format:'A4',headerTemplate:'Helloworld',footerTemplate:'涓€浜涙枃瀛?/b>',margin:{top:"100px",bottom:"200px",right:"30px",left:"30px",}});awaitbrowser.close();})()濂戒簡~鏈変簡杩欎簺锛屽氨鍙互婊¤冻鎴戜滑鍩烘湰鐨勬埅鍥鹃渶姹備簡鍩烘湰鏋舵瀯璇存槑鎴浘璇锋眰鎺ュ彛锛氳api浼氱洿鎺ヨ姹傝妭鐐规湇鍔★紝瀹冧細鎼哄甫鍙傛暟鍖呮嫭锛氭墭绠￠〉闈㈠湴鍧€锛堟埅鍙栫殑缃戦〉鍦板潃锛夛紝瀹介珮鎴浘绫诲瀷锛坧ng/pdf锛夋埅鍥炬墭绠￠〉闈細闈欐€乭tml椤甸潰鍙互缁檜rl浼犻€掑弬鏁版潵鎺у埗鍙橀噺銆傝妭鐐规湇鍔℃敹鍒版帴鍙ｈ姹傚悗锛屼細璇锋眰鎵樼椤甸潰锛屾瀯寤洪渶瑕佹嫤鎴殑缃戦〉锛屾墽琛屾埅鍥炬搷浣渁pi锛屽苟灏嗘埅鍥剧紦鍐插尯鏁版嵁杩斿洖缁欒姹傜殑鎺ュ彛銆傝嚦姝わ紝鎴戜滑鐨勫熀纭€璁炬柦鍦ㄦ⒊鐞嗗畬demo浠ｇ爜鐨勫墠缃幆澧冨悗锛屽亣璁炬垜浠凡缁忔湁浜嗗彲鐢ㄧ殑node鐜锛坣ode+koa2锛?/router灞俢onstscreenshotControllers=require('../controllers/puppeteer')constrouter=newKoaRouter()exports.router=router.post('/api/puppeteer/v1/screenshot',screenshotControllers.api.screenshot)//鎺у埗灞俢onstservice=require('../service/puppeteer')constscreenshot=(ctx,next)=>{returnservice.api.screenshot(ctx);}exports.api={screenshot}//鏈嶅姟灞俢onst{getScreenshot}=require('../puppeteer/index')exports.api={screenshot:async(ctx)=>{const{width,height,url,tid}=ctx.request.bodyconstres=awaitgetScreenshot(url,width,height,tid)鎺у埗鍙?log(res)if(res){ctx.body={code:200,message:'success',data:res}}}}//鍏蜂綋涓氬姟灞俢onstpuppeteer=require('puppeteer');constpath=require('path')exports.getScreenshot=async(url,width=800,height=600,fileName)=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()//璁剧疆鍙鍖哄煙鐨勫ぇ灏忥紝榛樿椤甸潰澶у皬涓?00x600鍒嗚鲸鐜嘺waitpage.setViewport({width,height})awaitpage.goto(url)//鎴浘鏁翠釜椤甸潰awaitpage.screenshot({path:path.resolve(`./screenshot/${fileName}.png`),//鍥剧墖淇濆瓨璺緞type:'png',fullPage:false//杈规粴鍔ㄨ竟鎴浘})//鎵цcos鎴杘ss鑴氭湰灏嗗浘鐗囦繚瀛樹笂浼犲埌cdn鐜锛岃繖閲岀敱浜庤皟璇曪紝鏆傛椂鐪佺暐awaitpage.close()awaitbrowser.close()return`${fileName}.png`}娴嬭瘯鏈嶅姟鍙敤鎬у惎鍔ㄨ妭鐐规湇鍔″惎鍔╬sotman妯℃嫙璇锋眰鎺ュ彛1.鐧惧害鏌ョ湅缁撴灉鍡紝浼间箮娌℃湁闂銆傜洰鍓嶅叿浣撶殑涓氬姟搴旂敤鏈夌敓鎴愭捣鎶ョ殑闇€姹傦紝閭ｄ箞鎴戜滑搴旇鎬庝箞鍋氬憿锛?.鏍规嵁UI鍥撅紝鑾峰彇鎵樼椤甸潰2.鏍规嵁浼犲叆鐨勫彉閲廼d锛岀紪鍐欏悗绔€昏緫锛?.璋冪敤鑺傜偣鏈嶅姟鑾峰彇鍥剧墖缂撳啿鍖烘垨鍥剧墖cdn鍦板潃awaitaxios({method:'POST'锛岀綉鍧€锛?http://xxx/api/puppeteer/v1/screenshot'锛屾暟鎹細{缃戝潃锛歚http://xxx/postFrame/home?lecCode=lec${i}`锛屽搴︼細335,height:525,tid:`lec${i}`}})鍒版涓烘锛岃繖涓柟妗堝彲浠ユ姽骞冲悇绉嶈繍琛岀幆澧冪殑宸紓浠ラ檷浣庢湰鍦扮敓鎴愬浘鍍忕殑澶辫触鐜囥€傛洿澶氱煡璇嗙偣鍜岀鍒╋紝璇佛煈?/p>
