当前位置：首页 > JavaScript

js实现将网页转换成pdf

2026-03-02 03:07:40JavaScript

使用html2pdf.js库

html2pdf.js是一个基于jsPDF和html2canvas的库，能够将HTML元素转换为PDF。安装方式如下：

npm install html2pdf.js

基础代码示例：

import html2pdf from 'html2pdf.js';

const element = document.getElementById('content-to-export');
const opt = {
  margin: 10,
  filename: 'document.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};

html2pdf().from(element).set(opt).save();

使用jsPDF配合html2canvas

jsPDF是纯客户端生成PDF的库，html2canvas可将DOM元素渲染为canvas。组合使用流程：

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

const element = document.getElementById('pdf-content');

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('download.pdf');
});

使用window.print()方法

浏览器原生打印功能可通过CSS控制打印样式：

window.print();

配套CSS示例：

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}

使用Puppeteer（Node.js环境）

服务端渲染方案适合需要后端处理的场景：

const puppeteer = require('puppeteer');

async function generatePDF(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: outputPath,
    format: 'A4',
    printBackground: true
  });
  await browser.close();
}

generatePDF('https://example.com', 'output.pdf');