快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个最简单的PDF在线预览demo，要求：1. 纯前端实现，不依赖后端 2. 支持文件选择和拖拽上传 3. 基本翻页和缩放功能 4. 响应式设计适配移动端 5. 包含详细代码注释。使用原生JavaScript实现，避免复杂框架，适合初学者学习PDF.JS核心API。- 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在做一个需要在线预览PDF的小项目，发现PDF.JS这个神器简直太适合新手了！完全不用后端支持，纯前端就能实现各种PDF阅读功能。今天就把我的学习过程整理成笔记，带大家10分钟快速上手。
环境准备超简单PDF.JS是Mozilla开源的库，直接通过CDN引入就行，连npm安装都省了。我推荐用官方提供的预构建版本，只需要两个JS文件：pdf.js负责核心解析，pdf.worker.js处理后台线程。记得把它们放在同一目录下。
基础页面结构HTML部分只需要5个关键元素：文件选择按钮、拖放区域、工具栏（缩放/翻页）、画布容器和状态栏。用Flexbox布局可以轻松实现响应式，在手机上看也不会错位。记得给拖放区域添加CSS悬停效果提升体验。
初始化PDF.JS核心代码不到20行：先设置worker路径，然后用PDFJS.getDocument()加载PDF文件。这里有个坑要注意——跨域问题！如果是本地测试，建议用Chrome启动时加上--allow-file-access-from-files参数。
实现文件交互通过input标签获取文件对象后，用FileReader转成ArrayBuffer。更酷的是拖放功能：监听dragOver和drop事件，阻止默认行为后就能获取文件数据。记得在UI上给用户明确的拖放反馈。
渲染与基础功能PDFJS.getDocument返回的promise会给出pdf对象，用getPage()获取指定页码后，用viewport设置缩放比例，最后在canvas上渲染。翻页功能就是简单的页码加减，配合重新渲染就行。
移动端适配技巧通过检测touch事件实现滑动翻页，用transform-scale做手势缩放。别忘了添加viewport元标签和禁止缩放=user-scalable=no来避免浏览器默认行为干扰。
整个过程中最让我惊喜的是PDF.JS的文档非常友好，每个API都有详细说明。比如textLayer可以提取文字内容，annotationLayer能显示批注，这些进阶功能也值得探索。
遇到的两个典型问题及解决方案： - 中文显示异常：需要引入cmaps字体包 - 大文件加载慢：用PDFJS.disableWorker=true关闭多线程（开发时调试用）
最后说说部署体验。这个项目特别适合放在InsCode(快马)平台上演示，因为： 1. 纯前端项目一键就能部署成可访问的网页 2. 内置的代码编辑器可以直接修改参数实时预览 3. 不需要自己折腾服务器配置
实际测试从上传代码到生成可分享链接只要30秒，对新手特别友好。建议大家可以先在这里练手，成功后再考虑移植到自己的服务器。PDF.JS还有很多高级功能等着挖掘，比如文本搜索、打印优化等，下次再继续分享进阶教程~
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个最简单的PDF在线预览demo，要求：1. 纯前端实现，不依赖后端 2. 支持文件选择和拖拽上传 3. 基本翻页和缩放功能 4. 响应式设计适配移动端 5. 包含详细代码注释。使用原生JavaScript实现，避免复杂框架，适合初学者学习PDF.JS核心API。- 点击'项目生成'按钮，等待项目生成完整后预览效果
