前端实现HTML转PDF

最新推荐文章于 2025-10-23 02:21:42 发布

原创

最新推荐文章于 2025-10-23 02:21:42 发布 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

这篇博客介绍了如何在前端使用html2canvas和jspdf插件将HTML页面转换为PDF文件。首先通过html2canvas将HTML转为图片，然后将图片转为base64，再利用jspdf生成PDF。内容包括插件安装、实现方法的编写以及在Vue中封装和使用这些方法。在实施过程中还提到了遇到的问题及其解决方案。

主要通过html2canvas和jspdf两个插件实现

通过html2canvas将HTML页面转换成图片，然后再将图片转换成base64，通过jspdf生成pdf文件

1、安装插件

npm install html2canvas jspdf --save

2、写实现方法

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default (elementId, fileName) => {
   
   
  if (!elementId) throw new Error("请传入元素id")
  const container = document.querySelector(`#${
     
     elementId}`)
  const canvas = document.createElement("canvas")
  const contentWidth = container.clientWidth
  const contentHeight = container