当前位置：首页 > JavaScript

js实现pdf报表

2026-03-15 20:21:07JavaScript

使用 jsPDF 生成 PDF 报表

jsPDF 是一个流行的 JavaScript 库，用于在客户端生成 PDF 文件。它支持文本、表格、图像等多种元素。

安装方式：

npm install jspdf

基础代码示例：

import { jsPDF } from "jspdf";

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("report.pdf");

使用 pdf-lib 创建可编辑 PDF

pdf-lib 是一个更现代的库，支持修改现有 PDF 和创建新 PDF。

安装：

npm install pdf-lib

示例代码：

js实现pdf报表

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

async function createPdf() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage();
  const { width, height } = page.getSize();

  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
  page.drawText('Monthly Report', {
    x: 50,
    y: height - 50,
    size: 30,
    font,
    color: rgb(0, 0, 0),
  });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, 'report.pdf', 'application/pdf');
}

使用 html2canvas 和 jsPDF 从 HTML 生成 PDF

这种方法适合将现有网页内容转换为 PDF。

安装依赖：

npm install html2canvas jspdf

实现代码：

js实现pdf报表

import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

function exportToPdf() {
  const element = document.getElementById('report-container');

  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('report.pdf');
  });
}

生成表格报表

使用 jsPDF 的自动表格插件：

import { jsPDF } from "jspdf";
import "jspdf-autotable";

const doc = new jsPDF();
const data = [
  ["Month", "Revenue", "Expenses"],
  ["January", 10000, 5000],
  ["February", 12000, 6000]
];

doc.autoTable({
  head: [data[0]],
  body: data.slice(1),
  startY: 20
});

doc.save('financial_report.pdf');

添加图表到 PDF

结合 Chart.js 生成图表后转换为 PDF：

import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';

async function exportChart() {
  const canvas = document.getElementById('myChart');
  const imgData = await html2canvas(canvas)
    .then(canvas => canvas.toDataURL('image/png'));

  const pdf = new jsPDF();
  pdf.addImage(imgData, 'PNG', 15, 40, 180, 100);
  pdf.save('chart_report.pdf');
}

设置 PDF 样式

自定义 PDF 样式和布局：

const doc = new jsPDF({
  orientation: 'landscape',
  unit: 'pt',
  format: [1000, 800]
});

doc.setFont('helvetica', 'bold');
doc.setFontSize(18);
doc.setTextColor(40, 40, 40);
doc.text('Annual Report', 400, 50, { align: 'center' });

doc.setDrawColor(200, 200, 200);
doc.setLineWidth(1);
doc.line(50, 70, 950, 70);

分页和多页处理

处理长内容分页：

const doc = new jsPDF();
let y = 20;

data.forEach((item, index) => {
  if (y > 260) {  // 接近页面底部
    doc.addPage();
    y = 20;
  }

  doc.text(item.description, 20, y);
  doc.text(`$${item.amount}`, 180, y);
  y += 10;
});

doc.save('multi_page_report.pdf');

这些方法提供了从简单到复杂的 PDF 生成方案，可以根据具体需求选择合适的工具和实现方式。对于企业级应用，可能需要结合后端服务进行更复杂的 PDF 处理和生成。