前端实现网页转PDF矢量文件，高清还原网页内容

前端Vue3后端Node.js Express 接口核心 PDF 引擎Puppeteer谷歌 Chrome 官方无头浏览器中文 100% 不乱码图片 100% 显示样式 1:1 还原A4 自动分页完美排版文字可选中矢量高清✅ 实现逻辑前端把整个网页 HTML的Dom元素传给 Node.js 后端后端用 Puppeteer 打开这个 HTML直接输出 标准 A4、无乱码、完整内容 PDF返回给前端下载依赖安装npm i puppeteer npm i express前端核心代码别问其他的照抄就行样式不对你就自己调调不了问AIconsthandleExportPDFasync(){try{awaitnextTick();awaitnewPromise(resolvesetTimeout(resolve,800));constdompdfContent.value;if(!dom)returnalert(内容未渲染完成);// // ✅ 1. Echarts转图片// constcanvasesdom.querySelectorAll(canvas);canvases.forEach((canvas){try{constimgnewImage();img.srccanvas.toDataURL(image/png);img.style.widthcanvas.offsetWidthpx;img.style.heightcanvas.offsetHeightpx;if(canvas.parentNode){canvas.parentNode.replaceChild(img,canvas);}}catch(e){}});// // ✅ 2. 修复所有img路径 转base64// constimgsdom.querySelectorAll(img);for(constimgofimgs){try{// 把 /assets 转成可访问路径if(img.src.includes(/assets/)){img.srcimg.src.replace(/assets/,http://localhost:5173/src/assets/);}// 转base64constblobawaitfetch(img.src).then(resres.blob());constbase64awaitnewPromisestring((resolve){constreadernewFileReader();reader.onload()resolve(reader.resultasstring);reader.readAsDataURL(blob);});img.srcbase64;img.style.displayblock;img.style.visibilityvisible;}catch(e){}}// // ✅ 3. 【关键修复】把 CSS 背景图全部转 base64// constelementsWithBgdom.querySelectorAll(*[style*background], *[class*one] .header);for(constelofelementsWithBg){constcomputedwindow.getComputedStyle(el);constbgImagecomputed.backgroundImage;if(!bgImage||bgImagenone)continue;// 提取图片URLconsturlMatchbgImage.match(/url\([]?([^])[]?\)/);if(!urlMatch||!urlMatch[1])continue;letimgUrlurlMatch[1];// 本地路径修复if(imgUrl.includes(/src/assets/)||imgUrl.includes(/assets/)){imgUrlimgUrl.replace(/assets/,http://localhost:5173/src/assets/);}// 转 base64 并替换try{constblobawaitfetch(imgUrl).then(resres.blob());constbase64awaitnewPromisestring((resolve){constreadernewFileReader();reader.onload()resolve(reader.resultasstring);reader.readAsDataURL(blob);});(elasHTMLElement).style.backgroundImageurl(${base64});}catch(e){}}// // ✅ 4. 收集样式// conststyleSheetsArray.from(document.styleSheets).map(sheet{try{returnArray.from(sheet.cssRules).map(rr.cssText).join();}catch(e){return;}}).join();consthtml!DOCTYPE html html head meta charsetUTF-8 style${styleSheets}* { font-family: Microsoft YaHei, sans-serif !important; } body { background: #fff; margin:0; padding:0; } /style /head body${dom.outerHTML}/body /html;// // 请求后端生成PDF// const{data}awaitaxios.post(http://localhost:3001/export-pdf,{html,filename:学习报告},{responseType:blob});constblobnewBlob([data],{type:application/pdf});consturlURL.createObjectURL(blob);constadocument.createElement(a);a.hrefurl;a.download学习报告.pdf;a.click();URL.revokeObjectURL(url);message.success(PDF导出成功)}catch(err){console.error(导出失败,err);message.error(导出失败)}};nodejs后端安装好依赖后复制这段代码到你创建的文件中启动后端服务就行了// const express require(express);// const puppeteer require(puppeteer);importexpressfromexpressimportpuppeteerfrompuppeteerconstappexpress();app.use(express.json({limit:50mb}));// 跨域配置app.use((req,res,next){res.setHeader(Access-Control-Allow-Origin,*);res.setHeader(Access-Control-Allow-Methods,POST,OPTIONS);res.setHeader(Access-Control-Allow-Headers,Content-Type);if(req.methodOPTIONS)returnres.sendStatus(200);next();});app.post(/export-pdf,async(req,res){try{const{html,filename}req.body;// 1. 关键修复中文文件名必须编码否则 Header 报错constencodedFilenameencodeURIComponent(${filename}.pdf);// 2. 启动 Chrome使用 Mac 本地 Chrome 路径避免下载失败constbrowserawaitpuppeteer.launch({headless:true,// 不需要可视化界面executablePath:/Applications/Google Chrome.app/Contents/MacOS/Google Chrome,// Mac 本地 Chrome 路径args:[--no-sandbox,--disable-dev-shm-usage,--disable-setuid-sandbox,--disable-gpu]});constpageawaitbrowser.newPage();// await page.setContent(html, {// waitUntil: networkidle0, // 必须加等所有样式加载完// });// await page.emulateMedia(print); // 必须加让PDF用打印样式awaitpage.waitForFunction((){returnArray.from(document.querySelectorAll(img)).every(imgimg.complete);},{timeout:10000});// 最多等10秒确保所有图片加载// 3. 设置超时时间延长等待awaitpage.setContent(html,{waitUntil:networkidle0,timeout:60000});awaitpage.addStyleTag({content:table, tr, td, th { page-break-inside: avoid !important; break-inside: avoid !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .header { display: flex !important; align-items: center !important; } .ml-2 { margin-left: 8px !important; } .page-title { line-height: 120px !important; font-size: 36px !important; } .info { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; } /* 强制图片显示防止加载失败后隐藏 */ img { display: block !important; visibility: visible !important; width: auto !important; height: auto !important; }});// 生成 PDFconstpdfBufferawaitpage.pdf({width:210mm,// A4 宽度不变height:297mm,// 从 297mm 加大到 330mm多装内容format:A4,printBackground:true,// 必须打印背景margin:{top:10mm,bottom:10mm,left:10mm,right:10mm}});awaitbrowser.close();// 4. 返回响应使用编码后的文件名res.setHeader(Content-Type,application/pdf);res.setHeader(Content-Disposition,attachment; filename*UTF-8${encodedFilename});// 这种写法支持中文下载res.send(pdfBuffer);}catch(err){console.error(PDF 生成失败:,err);res.status(500).send(PDF 生成失败请检查页面内容或服务状态。);}});app.listen(3001,(){console.log(✅ PDF 服务已启动http://localhost:3001);});