vue 前端导出PDF文件学起来

最新推荐文章于 2025-04-11 11:37:08 发布

晶晶姐姐

最新推荐文章于 2025-04-11 11:37:08 发布

阅读量571

点赞数

文章标签： vue.js 前端 pdf

本文链接：https://blog.youkuaiyun.com/weixin_47382137/article/details/127517103

版权

本文介绍如何在Vue.js项目中实现前端导出PDF文件。首先，通过npm安装必要的PDF生成库，接着对库进行二次封装，以便于在项目中使用。在封装过程中，重点要注意DOM节点的正确获取，确保内容能正确地被转换为PDF格式。最后，可在main.js中全局挂载该功能，或者根据需求选择局部挂载。

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

首先用 npm 引入 pdf 需要的依赖，之后需要进行二次封装，才能应用

npm install html2canvas
npm install jspdf

---------------------------------------------------------------------------------------------------------

自己找一个地方创建一个 js 文件，名字自己取，然后把下面这些东西复制进去。请务必看注意的点位，有一块注释很重要，dom 节点获取的位置

// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
var imgw = 40; var imgh = 40
function addWaterMark(doc) {

  var totalPages = doc.internal.getNumberOfPages();

  for (var i = 1; i <= totalPages; i++) {

    doc.setPage(i);

    // doc.addImage("/prod-api/file/download/50ff2b9c-76ab-4625-93e3-54aac3ac990b", 'PNG', 0 , 0 ,

最低0.47元/天解锁文章