记录通过vue-pdf实现打印文件预览功能遇到问题：跨域、https时不能使用http获取pdf、证书认证不通过

'# 记录通过vue-pdf实现打印文件预览功能遇到问题：跨域、https时不能使用http获取pdf、证书认证不通过

一、背景与问题

在开发一个文档预览系统时，我尝试使用 vue-pdf 库实现 PDF 文件的在线预览功能。然而在实际开发过程中遇到了三个核心问题：

跨域限制：当通过 HTTPS 协议访问服务时，无法通过 HTTP 协议从外部域名获取 PDF 文件
HTTPS 证书认证失败：当使用自签名证书时，浏览器会阻止不安全的资源加载
PDF 渲染异常：在某些场景下，PDF 内容无法正确渲染

这三个问题在实际项目中非常常见，特别是在需要同时支持 HTTPS 和跨域访问的场景下。本文将深入分析这些问题的原理，并提供完整的解决方案。

二、基本原理

1. vue-pdf 的工作原理

vue-pdf 是基于 pdf.js 的封装，其核心工作原理如下：

通过 pdfjs-dist 库解析 PDF 文件
使用 canvas 元素渲染 PDF 内容
支持分页、缩放、搜索等高级功能
需要确保 PDF 文件的访问路径符合安全要求

2. 跨域限制的原理

浏览器出于安全考虑，实施了同源策略（Same-Origin Policy），当以下情况发生时会触发 CORS（跨域资源共享）限制：

从 HTTPS 页面请求 HTTP 资源
从不同域名请求资源
从不同端口请求资源

当遇到 "Mixed Content" 错误时，浏览器会阻止不安全的资源加载。

3. HTTPS 证书认证的原理

HTTPS 使用 TLS 协议进行加密通信，证书验证过程包括：

客户端验证服务器证书是否合法
检查证书是否在有效期内
验证证书链是否完整
验证证书是否被吊销

自签名证书会因为缺少信任链而被浏览器拒绝。

三、环境准备

1. 项目依赖

npm install vue-pdf pdfjs-dist

2. 开发环境配置

建议使用 HTTPS 开发服务器，避免混合内容问题：

npm install -g https-server
https-server

3. 证书配置

对于开发环境，可以使用自签名证书：

openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 365 -subj "/CN=localhost"

四、核心实现

1. 基础 PDF 预览组件

<template>
  <div>
    <canvas ref="pdfCanvas" style="border: 1px solid #ccc"></canvas>
    <button @click="loadPDF">加载 PDF</button>
  </div>
</template>

<script>
import { pdf } from 'pdfjs-dist'
import { getPDF } from '@/api'

export default {
  data() {
    return {
      pdf: null,
      currentPage: 1
    }
  },
  methods: {
    async loadPDF() {
      try {
        const blob = await getPDF('https://example.com/sample.pdf')
        const reader = new FileReader()
        reader.onload = () => {
          const pdf = pdf.getDocument({ data: reader.result })
          this.pdf = pdf
          this.renderPage()
        }
        reader.readAsArrayBuffer(blob)
      } catch (err) {
        console.error('加载 PDF 出错:', err)
      }
    },
    async renderPage() {
      if (!this.pdf) return
      const page = await this.pdf.getPage(this.currentPage)
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      const viewport = page.getViewport({ scale: 1.5 })
      const canvasHeight = Math.floor(viewport.height * (canvas.width / viewport.width))
      
      canvas.height = canvasHeight
      canvas.width = viewport.width
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext)
    }
  }
}
</script>

关键点解释：

使用 pdfjs-dist 的 getDocument 方法加载 PDF
通过 FileReader 读取 Blob 数据
使用 getViewport 设置渲染比例
在 canvas 上绘制 PDF 页面

2. 跨域代理配置（开发环境）

// proxy.js
module.exports = {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    },
    secure: false, // 允许不安全的 HTTPS 连接
    headers: {
      'X-Content-Type-Options': 'nosniff',
      'X-Frame-Options': 'SAMEORIGIN',
      'X-XSS-Protection': '1; mode=block'
    }
  }
}

// package.json
{
  "proxy": "/api"
}

3. HTTPS 证书信任配置（开发环境）

// https-server.js
const https = require('https')
const fs = require('fs')
const express = require('express')
const app = express()

app.get('/pdf/:id', (req, res) => {
  const pdfPath = `./pdfs/${req.params.id}.pdf`
  fs.readFile(pdfPath, (err, data) => {
    if (err) return res.status(404).send('PDF not found')
    res.setHeader('Content-Type', 'application/pdf')
    res.send(data)
  })
})

const options = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
}

https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443')
})

五、完整案例

1. 项目结构

my-pdf-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── PdfViewer.vue
│   ├── api/
│   │   └── pdf.js
│   ├── App.vue
│   └── main.js
├── package.json
└── proxy.js

2. 完整的 PDF 预览组件

<template>
  <div class="pdf-viewer">
    <canvas ref="pdfCanvas" class="pdf-canvas"></canvas>
    <div class="controls">
      <button @click="prevPage">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
import { pdf } from 'pdfjs-dist'
import { getPDF } from '@/api'

export default {
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0
    }
  },
  mounted() {
    this.loadPDF()
  },
  methods: {
    async loadPDF() {
      try {
        const blob = await getPDF(this.$route.params.id)
        const reader = new FileReader()
        reader.onload = () => {
          const pdf = pdf.getDocument({ data: reader.result })
          this.pdf = pdf
          this.totalPages = this.pdf.numPages
          this.renderPage()
        }
        reader.readAsArrayBuffer(blob)
      } catch (err) {
        console.error('加载 PDF 出错:', err)
        this.$message.error('无法加载 PDF 文件')
      }
    },
    async renderPage() {
      if (!this.pdf) return
      const page = await this.pdf.getPage(this.currentPage)
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      const viewport = page.getViewport({ scale: 1.5 })
      const canvasHeight = Math.floor(viewport.height * (canvas.width / viewport.width))
      
      canvas.height = canvasHeight
      canvas.width = viewport.width
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext)
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.renderPage()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.renderPage()
      }
    }
  }
}
</script>

<style scoped>
.pdf-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.pdf-canvas {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 100%;
  max-width: 800px;
}

.controls {
  display: flex;
  gap: 10px;
  font-size: 16px;
}
</style>

3. API 接口实现

// src/api/pdf.js
import axios from 'axios'

export async function getPDF(pdfId) {
  // 生产环境应使用安全的 HTTPS 接口
  // 开发环境可使用本地代理
  const response = await axios.get(`http://localhost:3000/api/pdf/${pdfId}`)
  return response.data
}

六、源码解析

1. PDF 渲染核心流程

const page = await this.pdf.getPage(this.currentPage)
const viewport = page.getViewport({ scale: 1.5 })
const renderContext = {
  canvasContext: context,
  viewport: viewport
}
await page.render(renderContext)

getPage 获取指定页面对象
getViewport 计算页面的视图区域
render 方法将页面内容绘制到 canvas 上

2. 跨域代理配置原理

module.exports = {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    secure: false
  }
}

secure: false 允许不安全的 HTTPS 连接
changeOrigin 设置为 true 时，会将请求头的 Host 改为 target 的 Host
pathRewrite 可以重写请求路径

七、进阶使用

1. PDF 搜索功能

async searchText(text) {
  if (!this.pdf) return
  const pages = []
  for await (const page of this.pdf) {
    const textItems = await page.getTextContent()
    const textItemsStr = textItems.items.map(item => item.str).join(' ')
    if (textItemsStr.includes(text)) {
      pages.push(page)
    }
  }
  this.highlightPages(pages)
}

2. 动态加载 PDF

async loadPDFFromURL(url) {
  const response = await axios.get(url, {
    responseType: 'arraybuffer'
  })
  return new Uint8Array(response.data)
}

3. 多 PDF 文件管理

async loadMultiplePDFs(urls) {
  const promises = urls.map(url => this.loadPDFFromURL(url))
  const pdfBuffers = await Promise.all(promises)
  return pdfBuffers.map(buffer => {
    return pdf.getDocument({ data: buffer })
  })
}

八、性能与工程实践

1. 性能优化方案

优化措施	说明
懒加载	只在需要时加载 PDF 文件
分页加载	按需加载当前显示的页面
缓存策略	使用 localStorage 缓存已加载的 PDF
使用 CDN	将 pdfjs-dist 静态资源部署到 CDN
压缩 PDF	使用 PDF 可压缩工具减少文件体积

2. 安全风险分析

风险类型	描述	解决方案
PDF 恶意内容	PDF 可能包含恶意代码	使用 sandbox 沙箱环境执行
跨域攻击	未正确配置 CORS 头	设置严格的 CORS 策略
证书信任问题	自签名证书不被信任	使用受信任的 CA 证书

3. 高级安全配置

const options = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem'),
  ca: [fs.readFileSync('ca-cert.pem')],
  requestCert: false,
  rejectUnauthorized: false
}

九、常见问题与踩坑

1. 常见错误及解决方案

错误类型	错误信息	解决方案
Mixed Content	Blocked by CORS policy	配置 HTTPS 代理
Certificate error	The certificate is not trusted	使用受信任的 CA 证书
PDF not rendering	PDF content is not loaded	检查 PDF 文件是否完整
Page rendering error	Page number out of range	检查 totalPages 计算逻辑

2. 开发环境常见陷阱

混合内容问题：确保所有资源都通过 HTTPS 加载
证书信任问题：开发环境使用自签名证书时需手动信任
PDF 渲染异常：检查 PDF 文件的格式和完整性
性能瓶颈：大 PDF 文件可能导致内存溢出

十、最佳实践

1. 推荐的使用场景

需要展示 PDF 文件的 Web 应用
需要支持跨域访问的系统
需要 HTTPS 安全连接的项目
需要动态加载 PDF 文件的系统

2. 不推荐的使用场景

需要处理大量 PDF 文件的系统
需要对 PDF 进行深度编辑的系统
需要处理高安全要求的 PDF 文件
需要快速预览和打印功能的系统

3. 推荐的替代方案

PDF.js：直接使用原生 PDF.js 库
pdfmake：用于生成 PDF 文件
react-pdf：基于 React 的 PDF 预览库
vue-pdf-embed：轻量级 PDF 预览组件

十一、总结

通过本文的深入分析，我们可以看到在使用 vue-pdf 实现 PDF 预览功能时，需要特别注意跨域、HTTPS 证书和 PDF 渲染等问题。这些问题是实际开发中常见的挑战，需要结合 HTTPS 代理配置、证书信任管理和 PDF 渲染优化等方法来解决。

在实际项目中，建议根据具体需求选择合适的方案。对于需要支持 HTTPS 和跨域访问的场景，使用代理服务器是一个可靠的选择。对于需要处理大量 PDF 文件的系统，可能需要考虑更专业的 PDF 处理方案。

同时，开发过程中需要注意安全性问题，特别是在处理 PDF 文件时要确保内容的安全性。通过合理的设计和配置，可以有效地解决这些常见问题，构建稳定可靠的 PDF 预览系统。