教程：如何在Vue项目中将PDF转换为图片并展示

Oriel
488 阅读5分钟

技术栈准备

  • Vue 3 (Composition API)
  • pdfjs-dist (v2.16.105) - Mozilla开源的PDF渲染库

实现思路

  1. 检测文件URL是否为PDF格式
  2. 使用PDF.js加载PDF文件
  3. 将第一页渲染到Canvas元素
  4. 将Canvas转换为图片DataURL
  5. 在页面中显示转换后的图片

步骤详解

1. 创建Vue3项目并安装依赖

cd pdf-to-image-demo
npm install pdfjs-dist@2.16.105

2. 创建PDF工具函数

在src/utils/pdfUtils.js中创建核心转换函数：

import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

// 判断是否为图片链接
export const isImage = (url) => {
  return /.(png|jpe?g|gif|bmp|webp|svg)$/i.test(url);
};

// 判断是否为PDF链接
export const isPdf = (url) => {
  return /.pdf$/i.test(url);
};

// 将PDF的第一页转换为图片的DataURL
export const pdfConvertImg = async (imgUrl) => {
  if (!imgUrl || !isPdf(imgUrl)) return '';
  
  try {
    // 设置PDF.js的工作路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = window.pdfjsWorker;
    
    const loadingTask = pdfjsLib.getDocument({
      url: imgUrl,
      // 解决跨域问题
      withCredentials: false
    });
    
    const pdf = await loadingTask.promise;
    const page = await pdf.getPage(1); // 获取第一页
    const viewport = page.getViewport({ scale: 2.0 }); // 提高缩放比例获得更清晰图片
    
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    // 设置Canvas尺寸
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    // 渲染PDF页面到Canvas
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise;
    
    // 转换为DataURL
    return canvas.toDataURL('image/png');
  } catch (error) {
    console.error('PDF转换图片失败:', error);
    return '';
  }
};

3. 创建PDF预览组件

在src/components/PdfPreviewer.vue中创建组件：

<template>
  <div class="preview-container">
    <h2>PDF预览转换器</h2>
    
    <div class="controls">
      <input 
        type="file" 
        accept=".pdf" 
        @change="handleFileUpload" 
        class="file-input"
      />
      <button @click="loadSamplePdf" class="sample-btn">加载示例PDF</button>
    </div>
    
    <div v-if="loading" class="loading-indicator">
      <div class="spinner"></div>
      <p>正在转换PDF...</p>
    </div>
    
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <div v-if="previewUrl" class="preview-content">
      <div class="preview-card">
        <img :src="previewUrl" alt="PDF预览" class="preview-image" />
        <div class="preview-info">
          <p>PDF已成功转换为图片</p>
          <p class="resolution">分辨率: {{ imageWidth }} × {{ imageHeight }} px</p>
          <a :href="previewUrl" download="pdf_preview.png" class="download-btn">
            下载图片
          </a>
        </div>
      </div>
    </div>
    
    <div v-else class="instructions">
      <p>请上传PDF文件或点击"加载示例PDF"按钮</p>
      <div class="features">
        <div class="feature">
          <div class="icon">📄</div>
          <h3>PDF转换</h3>
          <p>将PDF文档转换为高质量图片预览</p>
        </div>
        <div class="feature">
          <div class="icon">🖼️</div>
          <h3>快速预览</h3>
          <p>无需完整加载PDF文档即可预览内容</p>
        </div>
        <div class="feature">
          <div class="icon">💾</div>
          <h3>下载图片</h3>
          <p>将转换结果保存为PNG格式图片</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { pdfConvertImg } from '../utils/pdfUtils';

const previewUrl = ref('');
const loading = ref(false);
const error = ref('');
const imageWidth = ref(0);
const imageHeight = ref(0);

const convertPdfToImage = async (fileUrl) => {
  loading.value = true;
  error.value = '';
  previewUrl.value = '';
  
  try {
    const dataUrl = await pdfConvertImg(fileUrl);
    if (dataUrl) {
      previewUrl.value = dataUrl;
      // 获取图片尺寸
      const img = new Image();
      img.onload = () => {
        imageWidth.value = img.width;
        imageHeight.value = img.height;
      };
      img.src = dataUrl;
    }
  } catch (err) {
    error.value = 'PDF转换失败: ' + err.message;
    console.error(err);
  } finally {
    loading.value = false;
  }
};

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  if (file && file.type === 'application/pdf') {
    const fileUrl = URL.createObjectURL(file);
    convertPdfToImage(fileUrl);
  } else {
    error.value = '请选择有效的PDF文件';
  }
};

const loadSamplePdf = () => {
  // 使用一个公开可访问的PDF作为示例
  const samplePdfUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
  convertPdfToImage(samplePdfUrl);
};
</script>

<style scoped>
.preview-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.file-input {
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px dashed #3498db;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.file-input:hover {
  background: #f0f8ff;
  border-color: #2980b9;
}

.sample-btn {
  padding: 0.75rem 1.5rem;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s ease;
}

.sample-btn:hover {
  background: #2980b9;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(52, 152, 219, 0.3);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  text-align: center;
  font-weight: 500;
}

.preview-content {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.preview-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  max-width: 800px;
}

.preview-image {
  width: 60%;
  object-fit: contain;
  border-right: 1px solid #eee;
}

.preview-info {
  padding: 2rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.resolution {
  background: #f8f9fa;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  color: #3498db;
  margin: 1rem 0;
}

.download-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #2ecc71;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.download-btn:hover {
  background: #27ae60;
}

.instructions {
  text-align: center;
  color: #7f8c8d;
  margin-top: 2rem;
  padding: 1rem;
}

.features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.feature {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  width: 220px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.feature:hover {
  transform: translateY(-5px);
}

.icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.feature p {
  color: #7f8c8d;
  font-size: 0.9rem;
}
</style>

4. 在App.vue中使用组件

<template>
  <div id="app">
    <PdfPreviewer />
  </div>
</template>

<script setup>
import PdfPreviewer from './components/PdfPreviewer.vue';
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  min-height: 100vh;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>

关键点说明

  1. PDF.js版本选择：

    • 使用2.16.105版本，该版本稳定且兼容性好
    • 注意不同版本API可能有差异

  2. 渲染参数：

    • scale: 2.0 - 控制渲染质量，值越大图片越清晰
    • 可根据需求调整，但注意过高的值会影响性能

  3. 跨域问题：

    withCredentials: false

    如果PDF文件在外部服务器上，可能需要处理CORS问题

  4. 性能优化：

    • 仅渲染第一页作为预览
    • 使用Web Worker避免阻塞UI
    • 添加加载状态提示

常见问题解决

  1. PDF无法加载？

    • 检查PDF文件URL是否正确
    • 确保服务器允许跨域请求(CORS)
    • 验证PDF文件没有损坏

  2. 图片模糊？

    • 增加getViewport()的scale参数值
    • 注意高scale值会增加内存使用

  3. 转换速度慢？

    • 大型PDF转换需要时间，添加加载指示器
    • 考虑使用缩略图预览代替完整分辨率

  4. 浏览器兼容性？

    • PDF.js支持所有现代浏览器
    • 对于旧版浏览器可能需要添加polyfill

总结

通过本教程，你已经学会了在Vue3项目中：

  • 安装和配置PDF.js
  • 将PDF文件转换为图片预览
  • 创建用户友好的预览界面
  • 处理常见问题和优化性能

这个功能特别适合需要快速预览PDF内容的场景，如文档管理系统、在线学习平台等。你可以根据实际需求扩展功能，比如添加多页预览或文本提取功能。

提示：在实际项目中，请确保处理PDF文件的隐私和安全问题，特别是当处理用户上传的文件时。

avatar
文章
阅读
粉丝