1. 項(xiàng)目概述為什么要在瀏覽器里把HTML轉(zhuǎn)成PDF作為一名前端開發(fā)我?guī)缀趺恐芏紩?huì)遇到需要把網(wǎng)頁內(nèi)容導(dǎo)出成PDF的場景。可能是后臺(tái)管理系統(tǒng)的數(shù)據(jù)報(bào)表可能是電商平臺(tái)的訂單詳情也可能是用戶需要離線保存的個(gè)性化文檔。以前這類需求通常要扔給后端用Java的iText、Python的ReportLab或者PHP的TCPDF等庫在服務(wù)器端生成。但這樣做的痛點(diǎn)很明顯服務(wù)器壓力大、生成速度依賴網(wǎng)絡(luò)、動(dòng)態(tài)內(nèi)容比如用戶實(shí)時(shí)填寫的表單處理麻煩而且樣式還容易跑偏?，F(xiàn)在隨著現(xiàn)代瀏覽器能力的不斷增強(qiáng)尤其是JavaScript API的日益豐富在瀏覽器端直接完成HTML到PDF的轉(zhuǎn)換已經(jīng)成為一個(gè)非常主流且高效的解決方案。它把計(jì)算壓力分散到了每個(gè)用戶的終端實(shí)現(xiàn)了“所見即所得”的精準(zhǔn)打印還能完美支持前端框架如Vue、React渲染的動(dòng)態(tài)內(nèi)容。今天我就結(jié)合自己踩過的無數(shù)個(gè)坑系統(tǒng)梳理一下在瀏覽器中實(shí)現(xiàn)HTML轉(zhuǎn)PDF的幾種核心方式從最簡單的打印到最復(fù)雜的自定義渲染幫你找到最適合你業(yè)務(wù)場景的那把“瑞士軍刀”。2. 核心方案全景與選型邏輯在深入細(xì)節(jié)之前我們得先搞清楚有哪些“武器”可用以及什么情況下該用什么。瀏覽器端生成PDF本質(zhì)上都是利用瀏覽器自身的渲染引擎如Blink、WebKit將HTMLCSS渲染成頁面再將其“打印”或“捕獲”為PDF格式。根據(jù)實(shí)現(xiàn)原理和控制粒度主要可以分為三大流派。2.1 方案一瀏覽器原生打印window.print這是最古老、最直接也最容易被低估的方法。直接調(diào)用window.print()會(huì)彈出系統(tǒng)的打印對(duì)話框用戶可以選擇“另存為PDF”。它的優(yōu)勢是零依賴、全瀏覽器支持。但缺點(diǎn)也同樣突出你無法以編程方式靜默觸發(fā)無法精細(xì)控制分頁、頁眉頁腳并且會(huì)受用戶本地打印機(jī)設(shè)置的影響。適用場景對(duì)PDF格式要求不高僅需提供“打印”功能讓用戶自行選擇保存為PDF的簡單頁面。例如一篇博客文章、一個(gè)簡單的通知。2.2 方案二HTML Canvas / SVG 渲染后轉(zhuǎn)換這種思路比較“曲線救國”先將HTML內(nèi)容通過html2canvas這類庫渲染成一張圖片Canvas然后再利用jsPDF等庫將圖片嵌入PDF中。它的最大優(yōu)點(diǎn)是能100%還原視覺表現(xiàn)包括復(fù)雜的CSS3動(dòng)畫、漸變、甚至Web字體因?yàn)楸举|(zhì)上就是截圖。但致命缺點(diǎn)是生成的PDF是位圖文字無法選中、搜索文件體積巨大且放大后會(huì)模糊。適用場景需要精確還原復(fù)雜視覺設(shè)計(jì)如海報(bào)、邀請函、數(shù)據(jù)可視化大屏的導(dǎo)出且對(duì)文件可編輯性和文字檢索無要求。2.3 方案三基于瀏覽器打印API的封裝庫主流推薦這是目前綜合體驗(yàn)最好的方案。其核心是使用一個(gè)“無頭瀏覽器”Headless Browser或?yàn)g覽器提供的編程接口在內(nèi)存中加載并渲染你的HTML然后調(diào)用其底層的打印功能生成PDF。對(duì)于前端開發(fā)者而言我們通常使用封裝好的第三方庫它們屏蔽了底層復(fù)雜性。根據(jù)實(shí)現(xiàn)原理又可分為兩類html-pdf/Puppeteer服務(wù)端方案嚴(yán)格來說這需要Node.js環(huán)境。庫會(huì)在后臺(tái)啟動(dòng)一個(gè)無頭Chrome如通過Puppeteer訪問一個(gè)URL或一段HTML字符串來生成PDF。雖然運(yùn)行在“服務(wù)器”但渲染引擎和生成邏輯與瀏覽器完全一致且可以由前端通過API調(diào)用觸發(fā)。jsPDFhtml2canvas的混合方案如前所述這是純前端方案但屬于Canvas流派。Print.js一個(gè)輕量級(jí)庫主要用于打印頁面的特定部分其PDF生成功能本質(zhì)上也是引導(dǎo)用戶使用瀏覽器的打印對(duì)話框但提供了更友好的API和樣式隔離。選型決策樹需求是“精確打印樣式”且“文字需可檢索”- 首選方案三特別是Puppeteer方案。需求是“完美復(fù)刻視覺特效”且不介意圖片格式- 選擇方案二html2canvas jsPDF。需求是“簡單提供打印功能”- 使用方案一或Print.js。接下來我將重點(diǎn)剖析方案三中最強(qiáng)大、也最常用的Puppeteer方案以及純前端的html2canvasjsPDF方案的完整實(shí)現(xiàn)與避坑指南。3. 基于Puppeteer的服務(wù)器端精準(zhǔn)生成雖然Puppeteer運(yùn)行在Node.js環(huán)境但它完美復(fù)現(xiàn)了Chrome瀏覽器的能力生成的PDF質(zhì)量最高控制選項(xiàng)最全是生產(chǎn)環(huán)境的首選。我們可以在后端部署一個(gè)服務(wù)接收前端發(fā)送的HTML內(nèi)容或URL返回PDF文件流。3.1 環(huán)境搭建與基礎(chǔ)實(shí)例首先你需要一個(gè)Node.js項(xiàng)目。npm init -y npm install puppeteer下面是一個(gè)最基礎(chǔ)的生成PDF的Node.js腳本const puppeteer require(puppeteer); const fs require(fs).promises; (async () { // 1. 啟動(dòng)瀏覽器。建議在無頭模式下運(yùn)行以節(jié)省資源。 const browser await puppeteer.launch({ headless: new }); // new 是更新的無頭模式 const page await browser.newPage(); // 2. 設(shè)置頁面內(nèi)容。這里有兩種方式 // 方式A通過URL加載一個(gè)已存在的網(wǎng)頁 // await page.goto(https://your-website.com/report, { waitUntil: networkidle0 }); // 方式B直接設(shè)置HTML字符串更靈活無需部署頁面 const htmlContent !DOCTYPE html html head meta charsetutf-8 style body { font-family: Arial; padding: 20px; } h1 { color: #333; } /style /head body h1銷售報(bào)表/h1 p生成時(shí)間${new Date().toLocaleString()}/p table border1 stylewidth:100%; border-collapse: collapse; trth產(chǎn)品/thth銷量/th/tr trtd商品A/tdtd120/td/tr /table /body /html ; await page.setContent(htmlContent, { waitUntil: domcontentloaded }); // 3. 生成PDF。這里的配置選項(xiàng)是關(guān)鍵 const pdfBuffer await page.pdf({ format: A4, // 紙張大小: A4, Letter等 printBackground: true, // 打印背景圖形和顏色至關(guān)重要 margin: { top: 50px, right: 50px, bottom: 50px, left: 50px }, // displayHeaderFooter: true, // 顯示頁眉頁腳 // headerTemplate: div stylefont-size:10px; text-align:center;頁眉/div, // footerTemplate: div stylefont-size:10px; text-align:center;第span classpageNumber/span頁/共span classtotalPages/span頁/div, }); // 4. 保存PDF到文件 await fs.writeFile(output.pdf, pdfBuffer); console.log(PDF已生成: output.pdf); // 5. 關(guān)閉瀏覽器 await browser.close(); })();注意printBackground: true這個(gè)選項(xiàng)必須開啟否則你的CSS背景色、背景圖片統(tǒng)統(tǒng)不會(huì)出現(xiàn)在PDF里這是新手最容易踩的坑。3.2 高級(jí)配置與樣式控制生成簡單的PDF不難難的是讓生成的PDF和你在瀏覽器里看到的一模一樣并且符合打印規(guī)范。1. 解決分頁與元素被切斷問題表格或一個(gè)div在頁面底部被生生切成兩半是PDF生成中最丑陋的問題。CSS提供了專為打印設(shè)計(jì)的屬性來解決/* 在用于生成PDF的HTML的CSS中添加 */ .keep-together { page-break-inside: avoid; /* 現(xiàn)代瀏覽器 */ break-inside: avoid; /* 更新的標(biāo)準(zhǔn) */ } .force-page-break-before { page-break-before: always; } .force-page-break-after { page-break-after: always; }將classkeep-together應(yīng)用到你不希望被分頁符切斷的容器上。對(duì)于標(biāo)題可以使用force-page-break-before確保新章節(jié)從新的一頁開始。2. 使用打印樣式表Print CSS網(wǎng)頁的屏幕樣式和打印樣式通常需求不同。你應(yīng)該在HTML的head中引入一個(gè)專為打印優(yōu)化的CSS并通過媒體查詢來定義。head link relstylesheet hrefscreen.css mediascreen link relstylesheet hrefprint.css mediaprint !-- 或者使用媒體查詢 -- style media screen { .only-for-screen { display: block; } } media print { .no-print { display: none !important; } /* 隱藏不需要打印的元素如按鈕 */ body { font-size: 12pt; line-height: 1.5; } /* 打印常用字體單位 */ a { text-decoration: none; color: black; } /* 鏈接處理 */ /* 確保背景色打印 */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } } /style /head-webkit-print-color-adjust: exact;是強(qiáng)制瀏覽器打印背景色的關(guān)鍵CSS屬性。3. 自定義頁眉頁腳Puppeteer的headerTemplate和footerTemplate支持簡單的HTML字符串并內(nèi)置了pageNumber,totalPages,date,title,url等變量。但請注意這些模板的樣式受限制且高度會(huì)計(jì)入margin的范圍。await page.pdf({ displayHeaderFooter: true, margin: { top: 100px, bottom: 100px }, // 為頁眉頁腳留出空間 headerTemplate: div stylefont-size: 8px; width: 100%; text-align: center; 公司機(jī)密 - span classtitle/span /div , footerTemplate: div stylefont-size: 8px; width: 100%; text-align: center; padding-top: 10px; border-top: 1px solid #eee; 第 span classpageNumber/span 頁 / 共 span classtotalPages/span 頁 /div , });3.3 性能優(yōu)化與實(shí)戰(zhàn)心得在實(shí)戰(zhàn)中直接使用上述腳本會(huì)遇到性能問題。每次生成PDF都啟動(dòng)一個(gè)瀏覽器實(shí)例開銷巨大。1. 復(fù)用瀏覽器實(shí)例Warm Pool對(duì)于高并發(fā)場景應(yīng)該維護(hù)一個(gè)瀏覽器實(shí)例池。// browser-pool.js - 一個(gè)簡單的瀏覽器池示例 const puppeteer require(puppeteer); const genericPool require(generic-pool); // 需要安裝 npm i generic-pool const factory { create: async () { return await puppeteer.launch({ headless: new, args: [--no-sandbox, --disable-setuid-sandbox] }); }, destroy: async (browser) { await browser.close(); } }; const pool genericPool.createPool(factory, { max: 5, // 最大實(shí)例數(shù) min: 1, // 最小實(shí)例數(shù) autostart: true }); module.exports pool; // 使用池 const pool require(./browser-pool); async function generatePDF(html) { const browser await pool.acquire(); const page await browser.newPage(); try { await page.setContent(html, { waitUntil: networkidle0 }); const pdf await page.pdf({ format: A4, printBackground: true }); return pdf; } finally { await page.close(); // 關(guān)閉頁面而不是瀏覽器 await pool.release(browser); // 將瀏覽器實(shí)例放回池中 } }2. 字體嵌入問題如果你使用了自定義字體如思源黑體必須確保字體文件能被Puppeteer訪問到并正確聲明在CSS中。style font-face { font-family: MyFont; src: url(file:///absolute/path/to/your/font.woff2) format(woff2); /* 本地絕對(duì)路徑 */ /* 或者將字體轉(zhuǎn)為Base64嵌入 */ src: url(data:font/woff2;base64,d09GRgABAAAA...) format(woff2); font-weight: normal; font-style: normal; font-display: swap; } body { font-family: MyFont, sans-serif; } /style更穩(wěn)妥的做法是將字體文件放在服務(wù)器上通過HTTP URL引用或者將字體轉(zhuǎn)換為Base64直接嵌入CSS避免路徑問題。3. 處理異步加載內(nèi)容如果你的頁面內(nèi)容是通過JS異步加載的比如Vue/React渲染或Ajax請求數(shù)據(jù)必須確保在生成PDF前內(nèi)容已完全就緒。// 等待某個(gè)特定元素出現(xiàn) await page.waitForSelector(#data-table-loaded, { timeout: 10000 }); // 或者等待所有網(wǎng)絡(luò)請求基本完成對(duì)于SPA應(yīng)用更有效 await page.setContent(html, { waitUntil: networkidle0 }); // 網(wǎng)絡(luò)空閑至少500ms // 或 await page.goto(url, { waitUntil: networkidle0 }); // 對(duì)于更復(fù)雜的情況可以注入腳本主動(dòng)通知 await page.evaluate(() { return new Promise((resolve) { // 假設(shè)你的應(yīng)用在加載完成后會(huì)觸發(fā)一個(gè)事件 window.addEventListener(app-ready, resolve); // 或者檢查某個(gè)全局變量 const check setInterval(() { if (window.appData window.appData.loaded) { clearInterval(check); resolve(); } }, 100); }); });4. 純前端方案html2canvas jsPDF 實(shí)戰(zhàn)當(dāng)你沒有Node.js服務(wù)器或者需要完全在客戶端離線操作時(shí)html2canvasjsPDF的組合是唯一可行的純前端方案。其工作流程分兩步1. 將目標(biāo)DOM節(jié)點(diǎn)“截圖”成Canvas2. 將Canvas圖片添加到j(luò)sPDF實(shí)例中。4.1 基礎(chǔ)集成與核心代碼首先安裝依賴npm install html2canvas jspdf # 或直接使用CDN基礎(chǔ)實(shí)現(xiàn)代碼import html2canvas from html2canvas; import jsPDF from jspdf; async function exportToPDF(elementId, filename document.pdf) { // 1. 獲取目標(biāo)DOM元素 const element document.getElementById(elementId); if (!element) { console.error(Element not found!); return; } // 2. 使用html2canvas將元素渲染為Canvas const canvas await html2canvas(element, { scale: 2, // 提高縮放倍數(shù)以獲得更清晰的圖片但會(huì)增加文件大小和處理時(shí)間 useCORS: true, // 如果元素中有跨域圖片需開啟此選項(xiàng) allowTaint: true, // 同上但可能帶來安全風(fēng)險(xiǎn)優(yōu)先用useCORS backgroundColor: #ffffff, // 強(qiáng)制白色背景避免透明背景 logging: false, // 關(guān)閉調(diào)試日志 onclone: function(clonedDoc) { // 回調(diào)函數(shù)用于操作克隆的文檔樹例如臨時(shí)顯示打印專用元素 const printOnlyEl clonedDoc.getElementById(print-only); if (printOnlyEl) printOnlyEl.style.display block; } }); // 3. 獲取Canvas的圖片數(shù)據(jù) const imgData canvas.toDataURL(image/jpeg, 1.0); // 也可用image/png但PNG體積更大 // 4. 初始化jsPDF計(jì)算尺寸 const pdf new jsPDF({ orientation: portrait, // 或 landscape unit: mm, format: a4 // A4尺寸: 210mm x 297mm }); const pdfWidth pdf.internal.pageSize.getWidth(); const pdfHeight pdf.internal.pageSize.getHeight(); // 5. 計(jì)算圖片在PDF中適配的尺寸保持寬高比 const imgWidth canvas.width; const imgHeight canvas.height; const ratio Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight); const scaledWidth imgWidth * ratio; const scaledHeight imgHeight * ratio; // 6. 將圖片添加到PDF居中 const x (pdfWidth - scaledWidth) / 2; const y (pdfHeight - scaledHeight) / 2; pdf.addImage(imgData, JPEG, x, y, scaledWidth, scaledHeight); // 7. 處理多頁如果內(nèi)容高度超過一頁Canvas需要手動(dòng)分頁 // ... (見下文4.2節(jié)) // 8. 保存PDF pdf.save(filename); } // 調(diào)用示例 document.getElementById(export-btn).addEventListener(click, () { exportToPDF(report-container); });4.2 處理長內(nèi)容分頁與性能陷阱上面的代碼只生成單頁P(yáng)DF。如果element內(nèi)容很長html2canvas會(huì)生成一個(gè)非常高的Canvas直接塞進(jìn)一頁P(yáng)DF會(huì)導(dǎo)致內(nèi)容被壓縮或裁剪。因此手動(dòng)分頁是必須的。核心思路將目標(biāo)DOM元素按“視窗”高度進(jìn)行分段分別對(duì)每一段進(jìn)行html2canvas渲染然后依次添加到PDF的不同頁面。async function exportMultiPagePDF(elementId, filename document.pdf) { const element document.getElementById(elementId); const pdf new jsPDF(p, mm, a4); const pdfWidth pdf.internal.pageSize.getWidth(); const pdfHeight pdf.internal.pageSize.getHeight(); const pageHeight pdfHeight * 0.95; // 留出一些邊距比如95%的頁面高度 // 臨時(shí)克隆原元素避免操作影響原頁面顯示 const clonedElement element.cloneNode(true); clonedElement.style.position absolute; clonedElement.style.left -9999px; document.body.appendChild(clonedElement); let position 0; // 記錄當(dāng)前渲染到的垂直位置 let pageNum 1; while (position clonedElement.scrollHeight) { // 創(chuàng)建一個(gè)“視窗”容器用于截取當(dāng)前頁的內(nèi)容 const canvas await html2canvas(clonedElement, { scale: 2, useCORS: true, windowWidth: element.scrollWidth, windowHeight: pageHeight, // 關(guān)鍵設(shè)置視窗高度 y: position, // 關(guān)鍵設(shè)置垂直偏移從position開始截圖 backgroundColor: #ffffff }); const imgData canvas.toDataURL(image/jpeg, 0.92); // 適當(dāng)降低質(zhì)量以減小體積 const imgWidth canvas.width; const imgHeight canvas.height; const ratio pdfWidth / imgWidth; const scaledHeight imgHeight * ratio; if (pageNum 1) { pdf.addPage(); // 從第二頁開始添加新頁面 } pdf.addImage(imgData, JPEG, 0, 0, pdfWidth, scaledHeight); position pageHeight; // 移動(dòng)到下一“頁”的起始位置 pageNum; } // 清理臨時(shí)元素 document.body.removeChild(clonedElement); pdf.save(filename); }重要心得這種分頁方式非常消耗性能因?yàn)槊恳豁摱家{(diào)用一次html2canvas進(jìn)行完整的布局計(jì)算和渲染。如果內(nèi)容有幾十頁瀏覽器可能會(huì)卡死或崩潰。務(wù)必添加加載提示并考慮對(duì)超長文檔進(jìn)行分段處理或提供服務(wù)器端方案。4.3 樣式、字體與跨域問題的終極解決方案1. 樣式丟失與錯(cuò)亂html2canvas的渲染并非百分百完美特別是對(duì)于復(fù)雜的Flexbox/Grid布局、position: fixed元素、CSS濾鏡(filter)、box-shadow過深、以及某些偽元素(::before,::after)。解決方案是使用更簡單、更“扁平”的樣式來構(gòu)建用于打印的視圖并充分測試。2. 自定義字體缺失和Puppeteer不同html2canvas渲染時(shí)使用的是當(dāng)前瀏覽器已加載的字體。你必須確保在調(diào)用exportToPDF之前所有Web字體都已加載完畢。// 使用Font Face Observer庫來監(jiān)聽字體加載 import FontFaceObserver from fontfaceobserver; async function ensureFontsLoaded() { const font new FontFaceObserver(MyCustomFont); try { await font.load(null, 5000); // 等待5秒超時(shí) console.log(字體加載完成); } catch (e) { console.warn(字體加載超時(shí)可能使用回退字體); } } async function exportPDF() { await ensureFontsLoaded(); // 再執(zhí)行html2canvas轉(zhuǎn)換 }3. 圖片跨域問題如果element中包含來自其他域CDN的圖片且該圖片未設(shè)置CORS頭html2canvas將無法正確繪制它導(dǎo)致圖片區(qū)域空白。解決方案最佳實(shí)踐確保圖片服務(wù)器設(shè)置正確的Access-Control-Allow-Origin頭。變通方案如果圖片可控可以先將圖片通過fetchblob的方式代理一次轉(zhuǎn)換為同源的Data URL。但這會(huì)顯著增加復(fù)雜性和內(nèi)存消耗。// 一個(gè)簡單的圖片代理轉(zhuǎn)換示例需考慮性能和錯(cuò)誤處理 async function convertImgToBase64(url) { const response await fetch(url); const blob await response.blob(); return new Promise((resolve, reject) { const reader new FileReader(); reader.onloadend () resolve(reader.result); reader.onerror reject; reader.readAsDataURL(blob); }); } // 然后在調(diào)用html2canvas前遍歷并替換所有圖片的src5. 常見問題排查與性能優(yōu)化速查表在實(shí)際操作中你會(huì)遇到各種各樣奇怪的問題。下面這個(gè)表格整理了我遇到過的典型問題及其解決方案。問題現(xiàn)象可能原因解決方案PDF背景色/背景圖丟失打印設(shè)置未啟用背景圖形Puppeteer: 設(shè)置printBackground: true。CSS: 添加-webkit-print-color-adjust: exact;。字體與瀏覽器顯示不一致1. 字體未加載完成。2. 字體文件路徑問題(Puppeteer)。3. 系統(tǒng)字體差異。1. 使用FontFaceObserver確保字體加載。2. 使用絕對(duì)路徑、HTTP URL或Base64嵌入字體。3. 使用通用字體族或嵌入所有變體。分頁時(shí)元素被切斷未使用CSS打印屬性控制分頁。為不希望被切斷的元素添加page-break-inside: avoid;或break-inside: avoid;。PDF文件體積過大純前端方案html2canvas的scale過高或使用PNG格式。1. 適當(dāng)降低scale如從2降到1.5。2. 使用toDataURL(image/jpeg, quality)并降低質(zhì)量如0.9。3. 考慮分頁渲染避免單張Canvas過大。生成過程瀏覽器卡死或無響應(yīng)1. DOM元素過于復(fù)雜。2. 一次性渲染內(nèi)容太多未分頁。3. 圖片過多、過大。1. 簡化打印視圖的DOM結(jié)構(gòu)。2.必須實(shí)現(xiàn)分頁邏輯分段渲染。3. 壓縮圖片或先加載低分辨率圖片用于生成。頁眉頁腳不顯示或錯(cuò)位Puppeteer1.margin設(shè)置過小未給頁眉頁腳留空間。2. 模板HTML樣式寫錯(cuò)。1. 確保margin.top和margin.bottom足夠大如80px。2. 頁眉頁腳模板內(nèi)只支持內(nèi)聯(lián)樣式且樣式非常有限。異步加載的內(nèi)容缺失生成PDF時(shí)JS動(dòng)態(tài)內(nèi)容還未渲染完成。使用page.waitForSelector、networkidle0或自定義Promise等待內(nèi)容就緒。CSS Flex/Grid布局在PDF中錯(cuò)亂某些打印引擎對(duì)現(xiàn)代布局支持有細(xì)微差異。為打印樣式使用更穩(wěn)定的布局如float、inline-block或table如果可行。測試是關(guān)鍵。html2canvas渲染出現(xiàn)空白或錯(cuò)位1. 元素有transform、opacity等屬性。2. 使用了position: fixed。3. 跨域圖片問題。1. 嘗試為元素添加transform: none !important;臨時(shí)覆蓋。2. 避免在要截圖的容器內(nèi)使用fixed定位。3. 配置useCORS: true并確保圖片服務(wù)器支持CORS。最后的性能忠告對(duì)于復(fù)雜的、多頁的、高質(zhì)量的PDF生成需求強(qiáng)烈建議使用服務(wù)器端方案Puppeteer。它將沉重的渲染工作從用戶瀏覽器轉(zhuǎn)移到擁有更強(qiáng)計(jì)算能力的服務(wù)器提供更穩(wěn)定、更快速、功能更完整的體驗(yàn)。純前端方案更適合內(nèi)容簡單、頁數(shù)少建議不超過10頁或?qū)﹄x線能力有強(qiáng)需求的場景。在選擇方案前務(wù)必用真實(shí)數(shù)據(jù)做壓力和體驗(yàn)測試。