简介这份资源面向需要在Web项目中集成文件在线预览能力的开发者尤其适合前端初学者与需要快速搭建演示页面的工程师。它用HTML与JavaScript实现浏览器内直接查看PDF、Excel、PPT、DOC、JPG、PNG等常见格式无需用户下载即可浏览内容覆盖了从原生标签嵌入到第三方库调用的多种思路。压缩包共6个文件包含2个JavaScript脚本、1个HTML示例页、1张JPG与1张PNG图片以及1份使用说明文本整体约238KB其中脚本承担预览逻辑与依赖加载示例页展示完整调用方式说明文档辅助部署与调试。目前已有27278人学习下载说明该方案在同类需求中具备较高参考价值。读者可从中获得可直接运行的预览示例、图片与PDF的嵌入写法、Office文档借助外部服务的处理思路以及针对本地或私有网络文件预览受限时的应对方向便于按需改造并接入自己的项目。1. 浏览器在线预览文件为什么“不下载”比“下载”更难做做过后台管理系统的人大概率都接过这种需求用户点一下附件列表里的文件名希望直接在浏览器里看到内容而不是先下载到本地再打开。PDF 还好说浏览器原生就支持可一旦碰上 Excel、PPT、Word很多人第一反应是“让用户下载吧”。但真实业务里用户往往在手机端、在审批流里、在只读场景下下载这一步就是体验断点。这个标题要解决的核心问题就是用 HTML JS 在浏览器里把 pdf、excel、ppt、doc、jpg、png 这几类文件直接渲染出来。它适合两类人一类是前端需要在管理后台、OA、知识库里嵌入预览能力另一类是后端或全栈想搞清楚前端到底能扛多少、哪些格式必须靠服务端转换。先说结论图片和 PDF 可以纯前端搞定Office 三件套纯前端只能“近似预览”真正稳定的方案一定是前端渲染 服务端转换配合。下面按这个思路拆开讲。2. 先分清哪些格式能纯前端预览哪些必须转换2.1 图片和 PDF浏览器原生能力直接吃下jpg、png 属于浏览器一等公民一个img标签就能显示唯一要注意的是大图内存和跨域。PDF 稍微复杂一点现代浏览器内置了 PDF 查看器用iframe或embed指向文件地址就能预览但这种方式在移动端和部分定制浏览器里表现不一致所以工程上更常用 pdf.js 这类库来接管渲染。纯前端能做的边界很清楚图片、PDF、纯文本、部分音视频。它们的共同点是浏览器有对应的解码器或渲染引擎。反过来Excel、PPT、Word 是二进制复合文档格式浏览器没有内置解析器纯前端库只能解析出部分结构样式和公式基本保不住。2.2 Office 三件套纯前端库只能“看个大概”社区里确实有 SheetJS 这类库能读 Excel也有 mammoth.js 能把 docx 转成 HTML。但要注意几个现实问题SheetJS 社区版对复杂样式、图表、条件格式支持有限mammoth.js 只处理 docx老的 doc 格式无能为力PPT 几乎没有靠谱的纯前端渲染库。所以如果你的需求是“还原度要高”纯前端这条路走不通。常见做法是前端负责展示服务端负责把 Office 转成 PDF 或图片。转换工具在服务端选 LibreOfficeheadless 模式或 OnlyOffice转完之后前端还是用 PDF 预览那套逻辑。这样前端代码统一格式兼容性交给服务端。2.3 选型对照不同格式该走哪条路格式纯前端方案推荐方案还原度jpg/pngimg直接渲染高pdfpdf.js / iframepdf.js高excelSheetJS 转 HTML服务端转 PDF中→高doc/docxmammoth.js仅 docx服务端转 PDF低→高ppt/pptx基本没有服务端转 PDF/图片低→高这张表是我踩过坑之后总结的别指望纯前端把 Office 还原到 100%把转换压力放到服务端前端只做统一渲染维护成本最低。3. 用 pdf.js 在页面里跑通 PDF 预览的最小实现3.1 引入 pdf.js 并渲染第一页pdf.js 是 Mozilla 维护的 PDF 渲染库核心思路是把 PDF 解析成 canvas 绘制指令。最小实现如下!DOCTYPE html html langzh-cn head meta charsetutf-8 titlePDF 预览/title /head body canvas idpdf-canvas/canvas script srchttps://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js/script script // 设置 worker 路径否则解析会阻塞主线程 pdfjsLib.GlobalWorkerOptions.workerSrc https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js; async function renderPdf(url) { const pdf await pdfjsLib.getDocument(url).promise; const page await pdf.getPage(1); // 取第一页 const viewport page.getViewport({ scale: 1.5 }); // scale 控制清晰度 const canvas document.getElementById(pdf-canvas); const ctx canvas.getContext(2d); canvas.width viewport.width; canvas.height viewport.height; await page.render({ canvasContext: ctx, viewport }).promise; } renderPdf(/files/demo.pdf); /script /body /html逻辑说明getDocument负责加载并解析 PDF返回一个 PDF 文档对象getPage(1)取第一页getViewport根据缩放比例算出 canvas 尺寸。参数上scale是最常调的1.5 适合普通屏幕高清屏可以给 2workerSrc必须指向同版本的 worker 文件版本不一致会直接报错。3.2 多页渲染与翻页控制实际业务里 PDF 往往几十页一次性全渲染会卡死。正确做法是按需渲染当前页let pdfDoc null; let currentPage 1; async function loadPdf(url) { pdfDoc await pdfjsLib.getDocument(url).promise; renderPage(currentPage); } async function renderPage(num) { const page await pdfDoc.getPage(num); const viewport page.getViewport({ scale: 1.5 }); const canvas document.getElementById(pdf-canvas); const ctx canvas.getContext(2d); canvas.width viewport.width; canvas.height viewport.height; await page.render({ canvasContext: ctx, viewport }).promise; document.getElementById(page-info).textContent ${num} / ${pdfDoc.numPages}; } document.getElementById(prev).onclick () { if (currentPage 1) renderPage(--currentPage); }; document.getElementById(next).onclick () { if (currentPage pdfDoc.numPages) renderPage(currentPage); };这里的关键是只渲染当前页翻页时重新调用renderPage。pdfDoc.numPages给出总页数用来做边界判断。注意每次渲染前要重置 canvas 宽高否则会出现残影。3.3 大文件加载与进度提示大 PDF 加载慢是常态用户看不到反馈就会以为卡死。pdf.js 支持进度回调const loadingTask pdfjsLib.getDocument({ url: /files/big.pdf, onProgress: (data) { // loaded / total 得到加载百分比 const percent ((data.loaded / data.total) * 100).toFixed(1); document.getElementById(progress).textContent 加载中 ${percent}%; } }); const pdf await loadingTask.promise;参数说明onProgress在加载过程中多次触发data.loaded和data.total单位是字节。如果服务端没返回Content-Lengthtotal可能是 0这时要降级成不确定进度条。另外大文件建议服务端开启分片或 Range 请求pdf.js 会自动利用。4. 图片与 Office 文件的预览落地从 img 到服务端转换4.1 图片预览img 标签之外的三个细节图片预览看起来最简单但工程上有三个坑。第一是大图内存一张 8000×6000 的图直接塞进img移动端可能直接崩常见做法是服务端生成缩略图点击再加载原图。第二是跨域如果图片在另一个域名canvas 操作会被污染需要服务端配 CORS。第三是格式兼容jpg、png 没问题但 webp、avif 在旧浏览器上要降级。img idpreview src/files/photo.jpg alt预览图 stylemax-width:100%;height:auto; / script // 加载失败时给出兜底提示 document.getElementById(preview).onerror function () { this.alt 图片加载失败请检查地址或跨域配置; }; /scriptmax-width:100%保证图片不撑破容器height:auto保持比例。onerror是后悔药线上图片 404 时至少用户知道发生了什么。4.2 Office 转 PDF服务端转换的调用方式前面说过 Office 三件套靠服务端转 PDF。以 LibreOffice headless 为例命令行转换# 把 docx 转成 pdf输出到指定目录 libreoffice --headless --convert-to pdf \ --outdir /data/preview /data/upload/report.docx参数说明--headless表示无界面运行适合服务器--convert-to pdf指定目标格式--outdir指定输出目录。转换完成后前端拿到的就是 PDF 地址继续用第 3 章的 pdf.js 渲染。注意 LibreOffice 转换是有损的复杂排版、特殊字体会偏移所以生产环境通常要配字体包。4.3 前端统一预览入口按扩展名分发前端拿到文件后根据扩展名决定走哪条渲染路径function previewFile(file) { const ext file.name.split(.).pop().toLowerCase(); const imageExts [jpg, jpeg, png, gif, webp]; const officeExts [doc, docx, xls, xlsx, ppt, pptx]; if (imageExts.includes(ext)) { renderImage(file.url); // 走 img 渲染 } else if (ext pdf) { renderPdf(file.url); // 走 pdf.js } else if (officeExts.includes(ext)) { // 请求服务端转换拿到 pdf 地址再渲染 fetch(/api/convert?fileId${file.id}) .then(res res.json()) .then(data renderPdf(data.pdfUrl)); } else { alert(暂不支持该格式预览); } }这段代码是预览模块的调度中心。ext统一转小写避免大小写导致的判断失败。Office 文件先请求转换接口接口返回 PDF 地址后再交给 pdf.js。转换接口建议做缓存同一个文件不要重复转。5. 在线预览的避坑与排查那些让预览翻车的细节5.1 现象PDF 预览白屏控制台报 worker 错误原因workerSrc路径不对或者 pdf.js 主库和 worker 版本不一致。解决确认两者版本号完全一致路径可访问。如果用了打包工具worker 文件要单独拷贝到静态目录不能被打包进 bundle。5.2 现象Office 转换后中文变成方块原因服务器缺少中文字体LibreOffice 找不到对应字形。解决在服务器安装常用中文字体如思源黑体、宋体安装后重启转换服务。这是血泪经验很多人第一次部署都会遇到。5.3 现象图片预览在移动端被拉伸变形原因只设了宽度没设高度或者容器用了固定高度。解决用max-width:100%;height:auto或者用object-fit:contain控制填充方式。别用background-size:100% 100%那一定会变形。5.4 现象大文件预览卡死浏览器原因一次性渲染所有页或者图片没做压缩。解决PDF 按需渲染当前页图片走缩略图 原图懒加载。服务端对超过一定大小的文件强制走转换或分片。5.5 现象跨域导致 PDF 加载失败原因pdf.js 通过 XHR 加载文件跨域时被浏览器拦截。解决服务端配置 CORS 允许来源或者把文件放到同域下。如果必须跨域确保响应头包含Access-Control-Allow-Origin。6. 进阶技巧用 iframe 兜底与预览性能优化6.1 iframe 兜底pdf.js 失败时的退路pdf.js 虽然强大但在某些老旧浏览器或特殊环境下会翻车。这时候可以用iframe兜底function renderPdfWithFallback(url) { try { renderPdf(url); // 优先用 pdf.js } catch (e) { // 失败时降级到浏览器原生 PDF 查看器 const iframe document.createElement(iframe); iframe.src url; iframe.style.width 100%; iframe.style.height 600px; document.getElementById(container).appendChild(iframe); } }这个兜底逻辑不复杂但能救急。注意 iframe 方式在移动端体验一般所以只作为降级方案。6.2 预览性能优化缓存与懒加载预览模块的性能瓶颈通常在重复请求和重复渲染。两个优化点一是转换结果缓存同一个 Office 文件转换一次后把 PDF 地址存起来下次直接返回二是懒加载列表页只显示文件名点击才加载预览内容。优化项做法收益转换缓存按文件 hash 存 PDF 地址避免重复转换图片缩略图服务端生成小图减少首屏流量PDF 按需渲染只渲染当前页降低内存占用预览懒加载点击才初始化加快列表加载6.3 一个我常用的验证习惯每次上线预览功能前我会拿四类文件各测一遍一张 10MB 的大图、一个 50 页的 PDF、一个带复杂表格的 xlsx、一个带中文字体的 docx。这四类覆盖了内存、分页、样式、字体四个最容易出问题的维度。测完再上能省掉大部分线上投诉。预览这件事纯前端能做的比想象中少服务端能补的比想象中多。把边界划清楚前端统一渲染服务端负责转换这套组合拳打下来pdf、excel、ppt、doc、jpg、png 都能稳稳落地。希望帮到你。本文还有配套的精品资源点击获取