当前位置：首页 > JavaScript

js实现pdf报表

2026-04-07 13:44:50JavaScript

使用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");

添加表格数据

使用jsPDF-autoTable插件可以方便地添加表格：

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

const doc = new jsPDF();
const data = [
  ["ID", "Name", "Value"],
  [1, "Item 1", 100],
  [2, "Item 2", 200]
];

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

doc.save("table-report.pdf");

使用PDFKit生成PDF

PDFKit是另一个功能强大的PDF生成库，适合更复杂的文档需求。

安装：

npm install pdfkit

示例代码：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));

doc.fontSize(25).text('Report Title', 100, 80);
doc.fontSize(12).text('This is a sample PDF report', 100, 100);

doc.end();

添加图表到PDF

结合Chart.js和jsPDF可以将图表转换为PDF：

// 先使用canvas生成图表
const chartCanvas = document.getElementById('chart');
const chartImage = chartCanvas.toDataURL('image/png');

// 添加到PDF
const doc = new jsPDF();
doc.addImage(chartImage, 'PNG', 15, 40, 180, 100);
doc.save('chart-report.pdf');

服务器端生成方案

对于Node.js环境，Puppeteer可以渲染网页后生成PDF：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com/report', {waitUntil: 'networkidle0'});
  await page.pdf({path: 'report.pdf', format: 'A4'});
  await browser.close();
})();

样式和布局控制

jsPDF支持基本样式设置：

const doc = new jsPDF();
doc.setFont("helvetica", "bold");
doc.setTextColor(255, 0, 0);
doc.text("Important Note", 10, 10);

doc.setFontSize(10);
doc.setTextColor(0, 0, 0);
doc.text("Details go here...", 10, 20);

多页文档处理

处理长内容自动分页：

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

for(let i = 0; i < 100; i++) {
  if(y > 280) {
    doc.addPage();
    y = 20;
  }
  doc.text(`Item ${i}`, 10, y);
  y += 10;
}

doc.save("long-report.pdf");

中文支持

处理中文需要添加字体：

import { jsPDF } from "jspdf";

const doc = new jsPDF();
doc.addFont('NotoSansSC-Regular.ttf', 'NotoSansSC', 'normal');
doc.setFont('NotoSansSC');
doc.text("中文内容", 10, 10);
doc.save("chinese-report.pdf");