当前位置：首页 > JavaScript

js实现将网页转换成pdf

2026-01-31 11:52:02JavaScript

使用html2pdf.js库

html2pdf.js是一个轻量级的JavaScript库，可以将HTML元素转换为PDF文件。它基于jsPDF和html2canvas，支持自定义选项。

安装方式：

npm install html2pdf.js

基本用法：

import html2pdf from 'html2pdf.js'

const element = document.getElementById('element-to-export')
const opt = {
  margin: 1,
  filename: 'myfile.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}

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

使用jsPDF配合html2canvas

jsPDF是一个流行的PDF生成库，结合html2canvas可以将网页内容先渲染为canvas再转换为PDF。

安装依赖：

npm install jspdf html2canvas

实现代码：

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

const generatePDF = async () => {
  const element = document.getElementById('pdf-content')
  const canvas = await html2canvas(element)
  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')
}

使用浏览器打印API

利用浏览器的打印功能，选择"另存为PDF"选项：

function printToPDF() {
  window.print()
}

CSS优化打印样式：

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

使用Puppeteer服务端方案

对于需要服务端渲染的场景，可以使用Puppeteer：

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()
}