Vue 打开 PDF 报错：未能加载 PDF 文档的解决方法

本文旨在解决在 Vue 项目中打开 PDF 文档时出现的“未能加载 PDF 文档”错误。主要涉及 Vue 框架与 PDF.js 库的集成问题，通过排查和配置，实现正确加载 PDF 文件。

问题分析

错误通常由以下原因导致：

PDF.js 库未正确引入或版本不兼容
服务器跨域问题导致资源加载失败
PDF 文件路径配置错误
浏览器安全策略限制

解决方案

1. 安装和配置 PDF.js

使用 npm 安装最新版本的 PDF.js 库：

npm install pdfjs-dist --save

在 Vue 组件中引入并初始化 PDF.js：

import { pdfjs } from 'pdfjs-dist';

// 设置 PDF.js worker 路径
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/3.4.120/pdf.worker.min.js';

2. 处理跨域问题

若 PDF 文件存储在远程服务器，需确保 CORS 配置正确：

对于 Apache 服务器，在 .htaccess 文件中添加：

Header set Access-Control-Allow-Origin "*"

对于 Nginx 服务器，在配置文件中添加：

add_header Access-Control-Allow-Origin *;

3. 正确配置 PDF 加载方式

3.1 直接加载本地 PDF 文件

使用 URL 路径直接加载：

const loadingTask = pdfjs.getDocument('/path/to/your/document.pdf');
loadingTask.promise.then(pdf => {
    // 渲染 PDF 页面
    renderPage(pdf, 1);
}).catch(error => {
    console.error('加载 PDF 失败:', error);
});

3.2 加载远程 PDF 文件

使用 HTTP 请求获取 PDF 数据：

fetch('/path/to/your/document.pdf')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
        pdfjs.getDocument({ data: arrayBuffer }).promise.then(pdf => {
            renderPage(pdf, 1);
        });
    })
    .catch(error => {
        console.error('获取 PDF 数据失败:', error);
    });

4. 渲染 PDF 页面

在 Canvas 元素中渲染 PDF 页面：

function renderPage(pdf, pageNumber) {
    pdf.getPage(pageNumber).then(page => {
        const scale = 1.5;
        const viewport = page.getViewport({ scale });
        
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        page.render({
            canvasContext: context,
            viewport: viewport
        });
        
        document.getElementById('pdf-container').appendChild(canvas);
    });
}

5. 处理浏览器安全限制

对于 Chrome 浏览器，尝试以下方法：

在本地开发时使用 chrome://inspect 功能
将 PDF.js worker 路径指向本地文件
禁用部分安全策略：chrome://flags 中搜索 “Disable security checks for local files” 并启用

6. 完整示例代码

<template>
  <div id="pdf-container"></div>
</template>

<script>
import { pdfjs } from 'pdfjs-dist';

export default {
  data() {
    return {
      pdf: null
    };
  },
  methods: {
    loadPDF(filePath) {
      pdfjs.GlobalWorkerOptions.workerSrc = 
        'https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/3.4.120/pdf.worker.min.js';
      
      if (filePath.startsWith('http')) {
        // 远程文件
        fetch(filePath)
          .then(response => response.arrayBuffer())
          .then(arrayBuffer => {
            this.renderPDF(arrayBuffer);
          });
      } else {
        // 本地文件
        pdfjs.getDocument(filePath).promise.then(pdf => {
          this.renderPDF(pdf);
        });
      }
    },
    renderPDF(pdfOrArrayBuffer) {
      if (typeof pdfOrArrayBuffer === 'object') {
        this.pdf = pdfOrArrayBuffer;
      } else {
        this.pdf = null;
      }
      
      if (this.pdf) {
        this.renderPage(this.pdf, 1);
      }
    },
    renderPage(pdf, pageNumber) {
      pdf.getPage(pageNumber).then(page => {
        const scale = 1.5;
        const viewport = page.getViewport({ scale });
        
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        page.render({
          canvasContext: context,
          viewport: viewport
        });
        
        const container = document.getElementById('pdf-container');
        container.innerHTML = '';
        container.appendChild(canvas);
      });
    }
  },
  mounted() {
    this.loadPDF('/path/to/your/document.pdf');
  }
};
</script>

标签: js · pdf · vue