首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue数据导出为PDF

Vue环境下数据导出为PDF的最全指南

2025-05-19 08:12:03 作者：百锦再@新空间

在现代Web应用开发中,将数据导出为PDF是一项常见且重要的功能需求,本文将全面探讨Vue环境下实现PDF导出的7种主要方法,大家可以根据自己的需求进行选择

1. 前言

在现代Web应用开发中，将数据导出为PDF是一项常见且重要的功能需求。PDF作为一种通用的文档格式，具有跨平台、保持格式一致、易于打印等优势。Vue.js作为当前流行的前端框架，提供了多种实现PDF导出的方法。本文将全面探讨Vue环境下实现PDF导出的7种主要方法，包括原生浏览器API、常用第三方库方案以及服务器端导出方案，每种方法都将提供详细的代码示例和优劣分析。

2. 原生浏览器打印方案

2.1 使用window.print()实现

这种方法利用浏览器自带的打印功能，通过CSS媒体查询控制打印样式。

实现原理：

创建专门用于打印的组件或视图
使用@media print定义打印样式
调用window.print()触发浏览器打印对话框

代码示例：

<template>
  <div>
    <button @click="print">打印PDF</button>
    
    <div ref="printContent" class="print-container">
      <h1>销售报表</h1>
      <table>
        <thead>
          <tr>
            <th>日期</th>
            <th>产品</th>
            <th>数量</th>
            <th>金额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in salesData" :key="item.id">
            <td>{{ item.date }}</td>
            <td>{{ item.product }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ formatCurrency(item.amount) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      salesData: [
        { id: 1, date: '2023-01-01', product: '产品A', quantity: 10, amount: 1000 },
        { id: 2, date: '2023-01-02', product: '产品B', quantity: 5, amount: 2500 }
      ]
    }
  },
  methods: {
    print() {
      window.print()
    },
    formatCurrency(value) {
      return '¥' + value.toLocaleString()
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-container, .print-container * {
    visibility: visible;
  }
  .print-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  /* 打印分页控制 */
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
}

/* 屏幕样式与打印样式分离 */
.print-container {
  display: none;
}
@media print {
  .print-container {
    display: block;
  }
}
</style>

优点：

零依赖，不增加项目体积
实现简单，适合简单打印需求
用户可以选择"另存为PDF"（大多数现代浏览器支持）

缺点：

依赖用户操作，无法自动化
打印样式控制有限
无法生成复杂的PDF文档
不同浏览器表现可能不一致

2.2 使用CSS Paged Media模块

对于更专业的打印需求，可以使用CSS Paged Media模块定义分页、页眉页脚等。

代码示例：

@page {
  size: A4;
  margin: 1cm;
  
  @top-left {
    content: "公司名称";
    font-size: 10pt;
  }
  
  @top-right {
    content: "页码 " counter(page) " / " counter(pages);
    font-size: 10pt;
  }
  
  @bottom-center {
    content: "机密文件";
    font-size: 8pt;
    color: #999;
  }
}

@media print {
  h1 {
    page-break-before: always;
  }
  
  table {
    page-break-inside: avoid;
  }
  
  .page-break {
    page-break-after: always;
  }
}

优点：

更专业的打印控制
支持页码、页眉页脚等高级功能
仍然是纯CSS方案，无JavaScript依赖

缺点：

浏览器支持不一致（特别是复杂特性）
学习曲线较陡
仍然依赖浏览器打印功能

3. 常用第三方库方案

3.1 使用jsPDF

jsPDF是最流行的JavaScript PDF生成库之一，可以直接在浏览器中生成PDF。

安装：

npm install jspdf

基础实现：

import jsPDF from 'jspdf'

export function generatePDF(title, data, columns, filename = 'export.pdf') {
  const doc = new jsPDF()
  
  // 添加标题
  doc.setFontSize(18)
  doc.text(title, 14, 15)
  
  // 添加表头
  doc.setFontSize(12)
  let y = 30
  columns.forEach((col, index) => {
    doc.text(col.label, 14 + index * 40, y)
  })
  
  // 添加数据行
  doc.setFontSize(10)
  data.forEach((row, rowIndex) => {
    y = 40 + rowIndex * 10
    if (y > 280) { // 接近页面底部
      doc.addPage()
      y = 20
    }
    columns.forEach((col, colIndex) => {
      doc.text(String(row[col.field]), 14 + colIndex * 40, y)
    })
  })
  
  // 保存文件
  doc.save(filename)
}

// Vue组件中使用
methods: {
  exportPDF() {
    const data = [
      { id: 1, name: '产品A', price: 100, stock: 50 },
      { id: 2, name: '产品B', price: 200, stock: 30 }
    ]
    const columns = [
      { label: 'ID', field: 'id' },
      { label: '产品名称', field: 'name' },
      { label: '价格', field: 'price' },
      { label: '库存', field: 'stock' }
    ]
    generatePDF('产品列表', data, columns)
  }
}

高级功能示例：

function generateAdvancedPDF() {
  const doc = new jsPDF({
    orientation: 'landscape',
    unit: 'mm',
    format: 'a4'
  })
  
  // 设置元数据
  doc.setProperties({
    title: '高级报表',
    subject: '2023年度销售数据',
    author: '销售系统',
    keywords: '销售, 报表, 2023',
    creator: '公司销售系统'
  })
  
  // 添加公司logo
  const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...'
  doc.addImage(imgData, 'PNG', 10, 10, 50, 15)
  
  // 添加标题
  doc.setFont('helvetica', 'bold')
  doc.setFontSize(22)
  doc.setTextColor(40, 40, 40)
  doc.text('2023年度销售报表', 105, 20, { align: 'center' })
  
  // 添加表格
  const headers = [['产品', 'Q1', 'Q2', 'Q3', 'Q4', '总计']]
  const salesData = [
    ['产品A', 1000, 1500, 1200, 1800, 5500],
    ['产品B', 800, 900, 1000, 1200, 3900],
    ['产品C', 500, 600, 700, 900, 2700]
  ]
  
  doc.autoTable({
    head: headers,
    body: salesData,
    startY: 40,
    theme: 'grid',
    headStyles: {
      fillColor: [22, 160, 133],
      textColor: 255,
      fontStyle: 'bold'
    },
    alternateRowStyles: {
      fillColor: [240, 240, 240]
    },
    margin: { top: 40 },
    didDrawPage: function(data) {
      // 页脚
      doc.setFontSize(10)
      doc.setTextColor(150)
      const pageCount = doc.internal.getNumberOfPages()
      doc.text(`第 ${doc.internal.getCurrentPageInfo().pageNumber} 页 / 共 ${pageCount} 页`, 
        data.settings.margin.left, 
        doc.internal.pageSize.height - 10
      )
    }
  })
  
  // 添加折线图（使用jsPDF的简单绘图功能）
  doc.setDrawColor(100, 100, 255)
  doc.setFillColor(100, 100, 255)
  
  const points = [
    { x: 60, y: 150, q: 'Q1' },
    { x: 90, y: 130, q: 'Q2' },
    { x: 120, y: 140, q: 'Q3' },
    { x: 150, y: 120, q: 'Q4' }
  ]
  
  // 绘制折线
  points.forEach((point, i) => {
    if (i > 0) {
      doc.line(points[i-1].x, points[i-1].y, point.x, point.y)
    }
    doc.circle(point.x, point.y, 2, 'F')
    doc.text(point.q, point.x, point.y + 10)
  })
  
  doc.save('advanced_report.pdf')
}

优点：

纯前端实现，不依赖服务器
功能丰富，支持文本、表格、简单图形等
支持自定义字体
活跃的社区和良好的文档

缺点：

复杂布局实现较困难
原生不支持复杂表格样式（需要插件）
中文支持需要额外配置字体

3.2 使用html2canvas + jsPDF

这种方案先将HTML转换为canvas，再将canvas转为PDF，适合需要精确复制页面样式的场景。

安装：

npm install html2canvas jspdf

基础实现：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export async function exportHTMLToPDF(element, filename = 'export.pdf', options = {}) {
  const canvas = await html2canvas(element, {
    scale: 2, // 提高分辨率
    logging: false,
    useCORS: true,
    allowTaint: true,
    ...options
  })
  
  const imgData = canvas.toDataURL('image/png')
  const pdf = new jsPDF({
    orientation: canvas.width > canvas.height ? 'landscape' : 'portrait',
    unit: 'mm'
  })
  
  const pageWidth = pdf.internal.pageSize.getWidth()
  const pageHeight = pdf.internal.pageSize.getHeight()
  
  const imgWidth = pageWidth
  const imgHeight = (canvas.height * imgWidth) / canvas.width
  
  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
  pdf.save(filename)
}

// Vue组件中使用
methods: {
  async exportPage() {
    const element = this.$refs.pdfContent
    await exportHTMLToPDF(element, 'page_export.pdf', {
      scale: 3 // 更高分辨率
    })
  }
}

高级功能示例：

async function exportMultiPagePDF() {
  const elements = document.querySelectorAll('.report-page')
  const pdf = new jsPDF('p', 'mm', 'a4')
  
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i]
    const canvas = await html2canvas(element, {
      scale: 2,
      logging: true
    })
    
    const imgData = canvas.toDataURL('image/png')
    const imgWidth = pdf.internal.pageSize.getWidth()
    const imgHeight = (canvas.height * imgWidth) / canvas.width
    
    if (i > 0) {
      pdf.addPage()
    }
    
    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
    
    // 添加页脚
    pdf.setFontSize(10)
    pdf.setTextColor(150)
    pdf.text(
      `第 ${i + 1} 页`, 
      pdf.internal.pageSize.getWidth() / 2,
      pdf.internal.pageSize.getHeight() - 10,
      { align: 'center' }
    )
  }
  
  pdf.save('multi_page_report.pdf')
}

优点：

精确复制页面样式和布局
支持复杂HTML结构和CSS样式
可以处理动态生成的内容
支持多页导出

缺点：

生成的PDF本质是图片，文字不可选择
大页面可能导致内存问题
性能较差，特别是复杂页面
分页控制较困难

3.3 使用pdfmake

pdfmake是一个声明式的PDF生成库，使用JSON格式定义文档结构。

安装：

npm install pdfmake

基础实现：

import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'

pdfMake.vfs = pdfFonts.pdfMake.vfs

export function generatePDFWithPdfMake(data, filename = 'document.pdf') {
  const docDefinition = {
    content: [
      { text: '销售报表', style: 'header' },
      '\n\n',
      {
        table: {
          headerRows: 1,
          widths: ['*', 'auto', 'auto', 'auto'],
          body: [
            ['产品', '季度1', '季度2', '季度3'],
            ...data.map(item => [
              item.product,
              { text: item.q1, alignment: 'right' },
              { text: item.q2, alignment: 'right' },
              { text: item.q3, alignment: 'right' }
            ])
          ]
        }
      }
    ],
    styles: {
      header: {
        fontSize: 18,
        bold: true,
        alignment: 'center'
      }
    },
    defaultStyle: {
      font: 'SimSun'
    }
  }
  
  pdfMake.createPdf(docDefinition).download(filename)
}

// Vue组件中使用
methods: {
  exportData() {
    const data = [
      { product: '产品A', q1: 1000, q2: 1500, q3: 1200 },
      { product: '产品B', q1: 800, q2: 900, q3: 1000 }
    ]
    generatePDFWithPdfMake(data, 'sales_report.pdf')
  }
}

高级功能示例：

function generateAdvancedPdfMakeDocument() {
  const docDefinition = {
    pageSize: 'A4',
    pageMargins: [40, 60, 40, 60],
    header: function(currentPage, pageCount) {
      return {
        text: `第 ${currentPage} 页 / 共 ${pageCount} 页`,
        alignment: 'right',
        margin: [0, 20, 20, 0]
      }
    },
    footer: function(currentPage, pageCount) {
      return {
        text: '公司机密 - 未经授权禁止复制',
        alignment: 'center',
        fontSize: 8,
        margin: [0, 0, 0, 20]
      }
    },
    content: [
      {
        columns: [
          {
            width: 100,
            image: 'logo',
            fit: [80, 80]
          },
          {
            width: '*',
            text: '2023年度财务报告',
            style: 'reportTitle'
          }
        ]
      },
      '\n\n',
      {
        text: '1. 销售概览',
        style: 'sectionHeader'
      },
      {
        text: '本年度公司整体销售额达到¥1,200万，同比增长15%。主要增长来自产品线A和B。',
        style: 'paragraph'
      },
      '\n',
      {
        style: 'tableExample',
        table: {
          widths: ['*', '*', '*', '*'],
          body: [
            [
              { text: '产品线', style: 'tableHeader' },
              { text: 'Q1', style: 'tableHeader' },
              { text: 'Q2', style: 'tableHeader' },
              { text: 'Q3', style: 'tableHeader' }
            ],
            ['产品A', '320万', '350万', '380万'],
            ['产品B', '280万', '300万', '320万'],
            ['产品C', '150万', '160万', '170万'],
            [
              { text: '总计', style: 'tableHeader' },
              { text: '750万', colSpan: 3, style: 'tableHeader' },
              {},
              {}
            ]
          ]
        }
      },
      '\n\n',
      {
        text: '2. 成本分析',
        style: 'sectionHeader',
        pageBreak: 'before'
      },
      {
        canvas: [
          {
            type: 'rect',
            x: 0, y: 0,
            w: 500, h: 20,
            color: '#eeeeee'
          },
          {
            type: 'rect',
            x: 0, y: 0,
            w: 350, h: 20,
            color: '#cc0000'
          }
        ]
      },
      {
        text: '成本构成示意图',
        alignment: 'center',
        italics: true,
        fontSize: 10,
        margin: [0, 5, 0, 0]
      }
    ],
    styles: {
      reportTitle: {
        fontSize: 24,
        bold: true,
        alignment: 'center',
        margin: [0, 20, 0, 0]
      },
      sectionHeader: {
        fontSize: 16,
        bold: true,
        margin: [0, 15, 0, 5]
      },
      paragraph: {
        fontSize: 12,
        lineHeight: 1.5,
        margin: [0, 0, 0, 10]
      },
      tableExample: {
        margin: [0, 5, 0, 15]
      },
      tableHeader: {
        bold: true,
        fontSize: 13,
        color: 'black',
        fillColor: '#dddddd'
      }
    },
    images: {
      logo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
    }
  }
  
  pdfMake.createPdf(docDefinition).open()
}

优点：

声明式API，易于理解和使用
强大的布局和样式控制能力
内置分页、页眉页脚支持
支持表格、列表、图片等多种元素

缺点：

中文支持需要额外配置字体
学习曲线较陡（特别是复杂布局）
文档结构可能变得复杂
性能不如原生jsPDF

3.4 使用vue-pdf

vue-pdf是一个Vue专用的PDF生成和显示组件库。

安装：

npm install @tato30/vue-pdf

基础实现：

<template>
  <div>
    <button @click="generatePDF">生成PDF</button>
    
    <div ref="pdfContent">
      <h1>员工信息</h1>
      <table>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>部门</th>
        </tr>
        <tr v-for="emp in employees" :key="emp.id">
          <td>{{ emp.id }}</td>
          <td>{{ emp.name }}</td>
          <td>{{ emp.department }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import VuePdf from '@tato30/vue-pdf'

export default {
  components: {
    VuePdf
  },
  data() {
    return {
      employees: [
        { id: 1, name: '张三', department: '研发' },
        { id: 2, name: '李四', department: '市场' }
      ]
    }
  },
  methods: {
    async generatePDF() {
      const pdf = new VuePdf()
      
      // 添加内容
      pdf.addText('员工信息', { fontSize: 18, align: 'center' })
      pdf.addBreak(20)
      
      // 添加表格
      pdf.addTable({
        headers: ['ID', '姓名', '部门'],
        rows: this.employees.map(emp => [emp.id, emp.name, emp.department]),
        styles: {
          cellPadding: 5,
          headerColor: '#eeeeee'
        }
      })
      
      // 生成并下载
      pdf.download('员工信息.pdf')
    }
  }
}
</script>

优点：

专为Vue设计，API更符合Vue习惯
轻量级，易于集成
支持基本的PDF生成功能

缺点：

功能相对有限
社区支持不如jsPDF或pdfmake
文档较少

4. 服务器端导出方案

4.1 前端请求服务器生成PDF

这种方案将PDF生成逻辑放在服务器端，前端只负责触发和下载。

前端代码：

export function requestPDFExport(params) {
  return axios({
    url: '/api/export-pdf',
    method: 'POST',
    data: params,
    responseType: 'blob'
  }).then(response => {
    const blob = new Blob([response.data], { 
      type: 'application/pdf' 
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'server_export.pdf')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

// Vue组件中使用
methods: {
  async exportFromServer() {
    try {
      this.loading = true
      await requestPDFExport({
        reportType: 'sales',
        year: 2023,
        format: 'A4'
      })
    } catch (error) {
      console.error('导出失败:', error)
    } finally {
      this.loading = false
    }
  }
}

Node.js服务器端示例（使用pdfkit）：

const express = require('express')
const PDFDocument = require('pdfkit')
const app = express()

app.post('/api/export-pdf', async (req, res) => {
  try {
    const { reportType, year, format } = req.body
    
    // 创建PDF文档
    const doc = new PDFDocument({ size: format || 'A4' })
    
    // 设置响应头
    res.setHeader('Content-Type', 'application/pdf')
    res.setHeader('Content-Disposition', 'attachment; filename="report.pdf"')
    
    // 管道传输到响应
    doc.pipe(res)
    
    // 添加内容
    doc.fontSize(25).text(`${year}年度${getReportTitle(reportType)}`, {
      align: 'center'
    })
    
    doc.moveDown()
    doc.fontSize(12).text('生成日期: ' + new Date().toLocaleDateString())
    
    // 添加表格数据
    const data = await getReportData(reportType, year)
    drawTable(doc, data)
    
    // 结束并发送
    doc.end()
  } catch (error) {
    console.error('PDF生成错误:', error)
    res.status(500).send('PDF生成失败')
  }
})

function drawTable(doc, data) {
  const startY = 150
  const rowHeight = 30
  const colWidth = 150
  const headers = ['产品', 'Q1', 'Q2', 'Q3', 'Q4', '总计']
  
  // 表头
  doc.font('Helvetica-Bold')
  headers.forEach((header, i) => {
    doc.text(header, 50 + i * colWidth, startY, {
      width: colWidth,
      align: 'center'
    })
  })
  
  // 表格内容
  doc.font('Helvetica')
  data.forEach((row, rowIndex) => {
    const y = startY + (rowIndex + 1) * rowHeight
    
    // 绘制行背景
    if (rowIndex % 2 === 0) {
      doc.fillColor('#f5f5f5')
        .rect(50, y - 10, colWidth * headers.length, rowHeight)
        .fill()
      doc.fillColor('black')
    }
    
    // 绘制单元格文本
    Object.values(row).forEach((value, colIndex) => {
      doc.text(String(value), 50 + colIndex * colWidth, y, {
        width: colWidth,
        align: colIndex > 0 ? 'right' : 'left'
      })
    })
  })
}

app.listen(3000, () => console.log('Server running on port 3000'))

优点：

处理大数据量更高效
减轻前端压力
可以复用服务器端数据处理逻辑
更安全，业务逻辑不暴露在客户端
支持更复杂的PDF生成（如使用专业PDF库）

缺点：

增加服务器负载
需要网络请求，可能有延迟
实现复杂度更高

4.2 使用无头浏览器生成PDF

对于需要精确复制网页样式的场景，可以在服务器端使用无头浏览器（如Puppeteer）生成PDF。

Node.js服务器示例（使用Puppeteer）：

const express = require('express')
const puppeteer = require('puppeteer')
const app = express()

app.post('/api/export-pdf', async (req, res) => {
  let browser = null
  try {
    const { url, options } = req.body
    
    browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    })
    
    const page = await browser.newPage()
    
    // 如果是URL，直接导航；如果是HTML内容，设置内容
    if (url.startsWith('http')) {
      await page.goto(url, { waitUntil: 'networkidle2' })
    } else {
      await page.setContent(url)
    }
    
    // 生成PDF
    const pdf = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: {
        top: '20mm',
        right: '20mm',
        bottom: '20mm',
        left: '20mm'
      },
      ...options
    })
    
    // 发送PDF
    res.setHeader('Content-Type', 'application/pdf')
    res.setHeader('Content-Disposition', 'attachment; filename="export.pdf"')
    res.send(pdf)
  } catch (error) {
    console.error('PDF生成错误:', error)
    res.status(500).send('PDF生成失败')
  } finally {
    if (browser) {
      await browser.close()
    }
  }
})

app.listen(3000, () => console.log('Server running on port 3000'))

优点：

精确复制网页样式和布局
支持所有现代CSS特性
可以处理动态内容
支持截图、PDF等多种输出

缺点：

资源消耗大（需要运行浏览器实例）
性能较差
部署复杂度高

5. 方法对比与选择指南

5.1 功能对比表

方法	生成方式	样式保真度	复杂度	性能	适用场景
浏览器打印	客户端	中等	低	高	简单打印需求
jsPDF	客户端	低	中	高	编程式生成简单PDF
html2canvas+jsPDF	客户端	高	中	中	精确复制页面样式
pdfmake	客户端	中	中	中	结构化文档生成
vue-pdf	客户端	低	低	高	简单Vue集成
服务器生成	服务端	可高可低	高	依赖实现	复杂/大数据量PDF
无头浏览器	服务端	极高	很高	低	精确复制复杂页面

5.2 选择建议

简单打印需求：使用浏览器打印方案，成本最低

编程式生成简单PDF：选择jsPDF，纯前端实现

精确复制页面样式：html2canvas+jsPDF组合或服务器端无头浏览器方案

结构化文档生成：pdfmake提供更直观的声明式API

Vue项目快速集成：考虑vue-pdf组件

大数据量或复杂处理：优先服务器端方案

最高样式保真度：无头浏览器方案（如Puppeteer）

5.3 性能优化建议

分页处理：对于大数据集，实现分页或分块生成

懒加载资源：只在需要时加载PDF生成库

Web Worker：将耗时的生成过程放在Worker线程

服务器缓存：对频繁请求的相同内容缓存生成的PDF

按需生成：提供预览功能，只在用户确认后生成完整PDF

资源优化：压缩图片等资源减少PDF体积

6. 最佳实践示例

完整的Vue PDF导出组件

<template>
  <div class="pdf-export">
    <button 
      @click="showModal = true"
      class="export-button"
    >
      <i class="icon-pdf"></i> 导出PDF
    </button>
    
    <div v-if="showModal" class="export-modal">
      <div class="modal-content">
        <h3>PDF导出选项</h3>
        
        <div class="form-group">
          <label>文件名</label>
          <input v-model="filename" type="text" placeholder="请输入文件名">
        </div>
        
        <div class="form-group">
          <label>纸张大小</label>
          <select v-model="pageSize">
            <option value="A4">A4</option>
            <option value="A3">A3</option>
            <option value="Letter">Letter</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>方向</label>
          <select v-model="orientation">
            <option value="portrait">纵向</option>
            <option value="landscape">横向</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>
            <input v-model="includeHeaderFooter" type="checkbox"> 包含页眉页脚
          </label>
        </div>
        
        <div class="form-group">
          <label>
            <input v-model="onlySelected" type="checkbox"> 仅导出选中项
          </label>
        </div>
        
        <div class="button-group">
          <button @click="showModal = false">取消</button>
          <button @click="exportPDF" :disabled="exporting">
            {{ exporting ? '导出中...' : '确认导出' }}
          </button>
        </div>
        
        <div v-if="progress > 0" class="progress-bar">
          <div class="progress" :style="{ width: progress + '%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  name: 'PdfExport',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    selectedRows: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '导出数据'
    }
  },
  data() {
    return {
      showModal: false,
      filename: 'export',
      pageSize: 'A4',
      orientation: 'portrait',
      includeHeaderFooter: true,
      onlySelected: false,
      exporting: false,
      progress: 0
    }
  },
  methods: {
    async exportPDF() {
      this.exporting = true
      this.progress = 0
      
      try {
        // 确定导出数据
        const exportData = this.onlySelected && this.selectedRows.length > 0
          ? this.selectedRows
          : this.tableData
        
        // 创建PDF
        const doc = new jsPDF({
          orientation: this.orientation,
          unit: 'mm',
          format: this.pageSize
        })
        
        // 添加标题
        doc.setFont('helvetica', 'bold')
        doc.setFontSize(16)
        doc.text(this.title, 105, 20, { align: 'center' })
        
        // 添加生成时间
        doc.setFont('helvetica', 'normal')
        doc.setFontSize(10)
        doc.text(`生成时间: ${new Date().toLocaleString()}`, 105, 30, { align: 'center' })
        
        // 添加表格
        await this.addTableToPDF(doc, exportData)
        
        // 添加页脚
        if (this.includeHeaderFooter) {
          const pageCount = doc.internal.getNumberOfPages()
          for (let i = 1; i <= pageCount; i++) {
            doc.setPage(i)
            doc.setFontSize(8)
            doc.text(
              `第 ${i} 页 / 共 ${pageCount} 页`,
              doc.internal.pageSize.getWidth() - 20,
              doc.internal.pageSize.getHeight() - 10
            )
          }
        }
        
        // 保存文件
        doc.save(`${this.filename}.pdf`)
        
        this.$emit('export-success')
        this.showModal = false
      } catch (error) {
        console.error('导出失败:', error)
        this.$emit('export-error', error)
      } finally {
        this.exporting = false
        this.progress = 0
      }
    },
    
    async addTableToPDF(doc, data) {
      const columns = this.tableColumns.filter(col => !col.hidden)
      const headers = columns.map(col => col.label)
      
      // 准备表格数据
      const tableData = data.map(row => {
        return columns.map(col => {
          let value = row[col.prop]
          if (col.formatter) {
            value = col.formatter(row, col)
          }
          return value !== undefined ? String(value) : ''
        })
      })
      
      // 自动调整列宽
      const pageWidth = doc.internal.pageSize.getWidth() - 20 // 左右边距
      const colWidth = pageWidth / columns.length
      const colWidths = columns.map(() => colWidth)
      
      // 分页添加表格
      let startY = 40
      let remainingData = tableData
      
      while (remainingData.length > 0) {
        // 计算当前页能容纳的行数
        const pageHeight = doc.internal.pageSize.getHeight()
        const rowHeight = 7
        const maxRows = Math.floor((pageHeight - startY - 20) / rowHeight)
        
        const chunk = remainingData.slice(0, maxRows)
        remainingData = remainingData.slice(maxRows)
        
        // 添加表格部分
        doc.autoTable({
          head: [headers],
          body: chunk,
          startY,
          margin: { left: 10, right: 10 },
          styles: {
            fontSize: 8,
            cellPadding: 2,
            overflow: 'linebreak'
          },
          columnStyles: columns.reduce((styles, col, index) => {
            styles[index] = { 
              cellWidth: colWidths[index],
              halign: col.align || 'left'
            }
            return styles
          }, {})
        })
        
        // 更新进度
        this.progress = ((tableData.length - remainingData.length) / tableData

到此这篇关于Vue环境下数据导出为PDF的最全指南的文章就介绍到这了,更多相关Vue数据导出为PDF内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue环境下数据导出为PDF的最全指南

1. 前言

2. 原生浏览器打印方案

2.1 使用window.print()实现

2.2 使用CSS Paged Media模块

3. 常用第三方库方案

3.1 使用jsPDF

3.2 使用html2canvas + jsPDF

3.3 使用pdfmake

3.4 使用vue-pdf

4. 服务器端导出方案

4.1 前端请求服务器生成PDF

4.2 使用无头浏览器生成PDF

5. 方法对比与选择指南

5.1 功能对比表

5.2 选择建议

5.3 性能优化建议

6. 最佳实践示例

您可能感兴趣的文章: