IT评测·应用市场-qidao123.com

标题: 前端实现 PDF 文件预览的 7 种方案详解 [打印本页]
作者: 十念    时间: 2025-3-11 05:27
标题: 前端实现 PDF 文件预览的 7 种方案详解
前端实现 PDF 文件预览的 7 种方案详解

一、原生浏览器方案

1. 使用 <embed> 标签

  1. <embed
  2.   src="document.pdf"
  3.   type="application/pdf"
  4.   width="100%"
  5.   height="600px"
  6. />
复制代码
优点：

缺点：

2. 使用 <object> 标签

  1. <object
  2.   data="document.pdf"
  3.   type="application/pdf"
  4.   width="100%"
  5.   height="600px"
  6. >
  7.   <p>您的浏览器不支持PDF预览，请<a href="document.pdf">下载查看</a></p>
  8. </object>
复制代码
3. 使用 <iframe> 标签

  1. <iframe
  2.   src="document.pdf#view=FitH"
  3.   width="100%"
  4.   height="600px"
  5.   frameborder="0"
  6. ></iframe>
复制代码
参数技巧：

二、PDF.js 方案（Mozilla 官方方案）

1. 基础集成

  1. // 安装
  2. npm install pdfjs-dist
  4. // 组件实现
  5. import * as pdfjsLib from 'pdfjs-dist/webpack';
  7. const container = document.getElementById('viewer');
  9. pdfjsLib.getDocument('document.pdf').promise.then(pdf => {
  10.   for(let pageNum = 1; pageNum <= pdf.numPages; pageNum++){
  11.     pdf.getPage(pageNum).then(page => {
  12.       const canvas = document.createElement('canvas');
  13.       const context = canvas.getContext('2d');
  14.       
  15.       const viewport = page.getViewport({ scale: 1.5 });
  16.       canvas.width = viewport.width;
  17.       canvas.height = viewport.height;
  19.       page.render({
  20.         canvasContext: context,
  21.         viewport: viewport
  22.       });
  23.       
  24.       container.appendChild(canvas);
  25.     });
  26.   }
  27. });
复制代码
2. 高级功能实现

  1. // 文字层渲染（支持复制）
  2. page.getTextContent().then(textContent => {
  3.   pdfjsLib.renderTextLayer({
  4.     textContent: textContent,
  5.     container: textLayerDiv,
  6.     viewport: viewport,
  7.     textDivs: []
  8.   });
  9. });
  11. // 添加标注功能
  12. const annotations = page.getAnnotations();
  13. annotations.then(annots => {
  14.   annots.forEach(annot => {
  15.     // 绘制高亮/下划线等
  16.   });
  17. });
复制代码
优势：

缺点：

三、流行第三方库方案

1. React 生态：react-pdf-viewer

  1. import { Viewer } from '@react-pdf-viewer/core';
  2. import '@react-pdf-viewer/core/lib/styles/index.css';
  4. function App() {
  5.   return (
  6.     <div style={{ height: '750px' }}>
  7.       <Viewer fileUrl="document.pdf" />
  8.     </div>
  9.   );
  10. }
复制代码
2. Vue 生态：vue-pdf-embed

  1. <template>
  2.   <vue-pdf-embed
  3.     :source="pdfSource"
  4.     :page="currentPage"
  5.     @rendered="handleRendered"
  6.   />
  7. </template>
  9. <script>
  10. import VuePdfEmbed from 'vue-pdf-embed';
  12. export default {
  13.   components: { VuePdfEmbed },
  14.   data() {
  15.     return { currentPage: 1 }
  16.   }
  17. }
  18. </script>
复制代码
四、云服务方案

Google Docs Viewer

  1. <iframe
  2.   src="https://docs.google.com/gview?url=YOUR_PDF_URL&embedded=true"
  3.   style="width:100%; height:600px;"
  4.   frameborder="0"
  5. ></iframe>
复制代码
注意事项：

五、服务端渲染方案

1. PDF 转图片方案

  1. // 服务端（Node.js）
  2. const pdf2pic = require('pdf2pic');
  3. const options = {
  4.   density: 100,   // 输出质量
  5.   format: "png",  // 输出格式
  6.   width: 800,     // 输出宽度
  7.   height: 1200    // 输出高度
  8. };
  9. const convert = new pdf2pic(options);
  11. convert("document.pdf", 1)  // 转换第一页
  12.   .then(response => {
  13.     console.log(response); // { path: '/images/document.png' }
  14.   })
复制代码
2. PDF 转 HTML 方案

  1. # 使用 pdf2htmlEX 工具
  2. pdf2htmlEX --zoom 1.3 --embed-font 0 input.pdf output.html
复制代码
六、移动端优化方案

1. 手势控制实现

  1. // 使用 hammer.js 添加手势
  2. const hammer = new Hammer(pdfContainer);
  3. hammer.on('swipeleft', () => goToNextPage());
  4. hammer.on('swiperight', () => goToPrevPage());
  5. hammer.on('pinch', (e) => adjustZoom(e.scale));
复制代码
2. 性能优化技巧


七、方案对比与选型建议

方案适用场景优点缺点原生标签快速原型开发零配置、无依赖样式不可控、功能受限PDF.js企业级复杂需求完全可控、功能强大实现成本较高第三方封装库特定框架项目开箱即用、生态整合灵活性受限云服务临时/演示场景无需维护服务端网络依赖、隐私风险服务端渲染老旧装备兼容客户端压力小服务端资源斲丧大 选型建议：
扩展知识：常见标题解决方案

1. 跨域标题处理

  1. # Nginx 配置
  2. location /pdf/ {
  3.   add_header 'Access-Control-Allow-Origin' '*';
  4.   add_header 'Access-Control-Allow-Methods' 'GET';
  5. }
复制代码
2. 大文件加载优化

  1. // 分片加载
  2. const CHUNK_SIZE = 1024 * 1024; // 1MB
  3. let offset = 0;
  5. const loadChunk = () => {
  6.   fetch(url, {
  7.     headers: { 'Range': `bytes=${offset}-${offset + CHUNK_SIZE}` }
  8.   }).then(res => {
  9.     // 处理分片数据
  10.     offset += CHUNK_SIZE;
  11.     if(offset < totalSize) loadChunk();
  12.   });
  13. }
复制代码
3. 水印添加方案

  1. // Canvas 绘制水印
  2. function addWatermark(canvas, text) {
  3.   const ctx = canvas.getContext('2d');
  4.   ctx.fillStyle = 'rgba(0,0,0,0.1)';
  5.   ctx.font = '20px Arial';
  6.   ctx.rotate(-30 * Math.PI / 180);
  7.   ctx.fillText(text, 50, 100);
  8. }
复制代码
总结

前端 PDF 预览须要根据实际场景选择技能方案，对于须要深度定制和复杂交互的场景，推荐使用 PDF.js 配合 Canvas 渲染；对于追求快速实现的场景，可选用封装好的第三方库。无论选择哪种方案，都须要重点关注：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4