前端实现PDF文件预览的7种方案与性能对比详解

<embed 
  src="document.pdf" 
  type="application/pdf" 
  width="100%" 
  height="600px"
/>

<object 
  data="document.pdf" 
  type="application/pdf"
  width="100%"
  height="600px"
>
  <p>您的浏览器不支持PDF预览，请<a href="document.pdf" rel="external nofollow" >下载查看</a></p>
</object>

<iframe 
  src="document.pdf#view=FitH"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>

// 安装
npm install pdfjs-dist

// 组件实现
import * as pdfjsLib from 'pdfjs-dist/webpack';

const container = document.getElementById('viewer');

pdfjsLib.getDocument('document.pdf').promise.then(pdf => {
  for(let pageNum = 1; pageNum <= pdf.numPages; pageNum++){
    pdf.getPage(pageNum).then(page => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      page.render({
        canvasContext: context,
        viewport: viewport
      });
      
      container.appendChild(canvas);
    });
  }
});

// 文字层渲染（支持复制）
page.getTextContent().then(textContent => {
  pdfjsLib.renderTextLayer({
    textContent: textContent,
    container: textLayerDiv,
    viewport: viewport,
    textDivs: []
  });
});

​​​​​​​// 添加标注功能
const annotations = page.getAnnotations();
annotations.then(annots => {
  annots.forEach(annot => {
    // 绘制高亮/下划线等
  });
});

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

function App() {
  return (
    <div style={{ height: '750px' }}>
      <Viewer fileUrl="document.pdf" />
    </div>
  );
}

<template>
  <vue-pdf-embed 
    :source="pdfSource" 
    :page="currentPage"
    @rendered="handleRendered"
  />
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed';

​​​​​​​export default {
  components: { VuePdfEmbed },
  data() {
    return { currentPage: 1 }
  }
}
</script>

<iframe
  src="https://docs.google.com/gview?url=YOUR_PDF_URL&embedded=true"
  style="width:100%; height:600px;"
  frameborder="0"
></iframe>

// 服务端（Node.js）
const pdf2pic = require('pdf2pic');
const options = {
  density: 100,   // 输出质量
  format: "png",  // 输出格式
  width: 800,     // 输出宽度
  height: 1200    // 输出高度
};
const convert = new pdf2pic(options);

convert("document.pdf", 1)  // 转换第一页
  .then(response => {
    console.log(response); // { path: '/images/document.png' }
  })

# 使用 pdf2htmlEX 工具
pdf2htmlEX --zoom 1.3 --embed-font 0 input.pdf output.html

// 使用 hammer.js 添加手势
const hammer = new Hammer(pdfContainer);
hammer.on('swipeleft', () => goToNextPage());
hammer.on('swiperight', () => goToPrevPage());
hammer.on('pinch', (e) => adjustZoom(e.scale));

# Nginx 配置
location /pdf/ {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET';
}

// 分片加载
const CHUNK_SIZE = 1024 * 1024; // 1MB
let offset = 0;

const loadChunk = () => {
  fetch(url, {
    headers: { 'Range': `bytes=${offset}-${offset + CHUNK_SIZE}` }
  }).then(res => {
    // 处理分片数据
    offset += CHUNK_SIZE;
    if(offset < totalSize) loadChunk();
  });
}

// Canvas 绘制水印
function addWatermark(canvas, text) {
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  ctx.font = '20px Arial';
  ctx.rotate(-30 * Math.PI / 180);
  ctx.fillText(text, 50, 100);
}