vue实现pdf

Vue 中实现 PDF 功能的方法

使用第三方库 vue-pdf

安装 vue-pdf 库：

npm install vue-pdf

在组件中使用：

<template>
  <pdf :src="pdfUrl"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

使用 PDF.js 直接集成

引入 PDF.js 核心库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

创建 PDF 渲染组件：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
export default {
  props: ['pdfUrl'],
  mounted() {
    this.renderPDF()
  },
  methods: {
    async renderPDF() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      page.render(renderContext)
    }
  }
}
</script>

生成 PDF 文档

使用 jsPDF 库创建 PDF：

npm install jspdf

生成 PDF 示例：

import jsPDF from 'jspdf'

function generatePDF() {
  const doc = new jsPDF()
  doc.text('Hello Vue!', 10, 10)
  doc.save('vue-generated.pdf')
}

PDF 预览与下载

实现 PDF 预览功能：

<template>
  <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
</template>

实现下载功能：

function downloadPDF(url, filename) {
  const link = document.createElement('a')
  link.href = url
  link.download = filename || 'document.pdf'
  link.click()
}

注意事项

• 跨域问题：确保 PDF 文件与网站同源或服务器配置了正确的 CORS 头
• 性能优化：大型 PDF 文件应考虑分页加载
• 移动端适配：针对移动设备调整 PDF 显示尺寸
• 安全考虑：用户上传的 PDF 文件应进行安全扫描

以上方法可根据具体需求选择或组合使用，vue-pdf 适合快速集成，PDF.js 提供更多底层控制，jsPDF 适用于动态生成 PDF 内容。