在Vue中使用jsPDF，为每一页添加固定信息

最新推荐文章于 2025-06-20 09:18:40 发布

yeeeee!

最新推荐文章于 2025-06-20 09:18:40 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43130844/article/details/124923532

VUE 同时被 2 个专栏收录

8 篇文章

订阅专栏

7 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用jsPDF库为生成的PDF文档每一页添加固定信息或特定内容。通过获取PDF的总页数并循环设置页面，结合pdf.internal.getNumberOfPages()和pdf.setPage()方法，可以实现在每一页上添加水印或其他数据。此技术适用于需要自定义PDF文档的前端开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue项目中使用jsPDF生成PDF，其中可能会有这样的需求——为每一页添加固定信息或者按照特定规律添加信息。这时候可以使用jsPDF的pdf.internal.getNumberOfPages()以及pdf.setPage()搭配使用来实现需求，具体如下：

import jsPDF from 'jspdf'
const pdf = new jsPDF()
/**
* ....... 进行了相应的PDF生成操作
*/

// 在最后进行每页插入数据的操作
const totalPages = pdf.internal.getNumberOfPages() // 获取当前pdf的页数
for (let i = 1; i <= totalPages; i++) {
  pdf.setPage(i) // 通过循环，跳转至相应的页进行设置
  // 后面可以进行相应的数据写入操作了，例如以下的添加水印操作
  pdf.setTextColor(150)
  pdf.text(50, pdf.internal.pageSize.height - 20, 'Watermark')
}