前端实现将多个页面导出为pdf(分页)

一、需要用到两个插件,需要安装

vue框架中实现导出pdf

javascript 复制代码
npm install --save html2canvas       // Dom转canvas再转image
npm install jspdf --save             // image转pdf

二、实现方法

分别获取每个页面的DOM元素,并转为canvas再转image,通过jsPDF插件把图片添加进来,再实现导出即可

jsPDF提供了一个很有用的API,addPage(),我们可以通过pdf.addPage(),来添加一页pdf,然后通过pdf.addImage(...),将图片赋予这页pdf来显示。

三、完整代码

javascript 复制代码
<template>
  <div class="main">
    <el-button @click="download">下载</el-button>
    
    <div id="page1">
      <img src="@/assets/images/page1.png" alt="page1" />
    </div>
    <div id="page2">
      <img src="@/assets/images/page2.png" alt="page2" />
    </div>
    <div id="page3">
      <img src="@/assets/images/page3.png" alt="page3" />
    </div>
  </div>
</template>

<script setup lang="ts">
import JsPDF from "jspdf";
import html2canvas from "html2canvas";

const download = () => {
  let pageDom1 = document.getElementById("page1") as HTMLElement;
  let pageDom2 = document.getElementById("page2") as HTMLElement;
  let pageDom3 = document.getElementById("page3") as HTMLElement;

  let listDom = [html2canvas(pageDom1), html2canvas(pageDom2), html2canvas(pageDom3)]; // dom转canvas

  Promise.all(listDom).then(canvasList => {
    let pdf = new JsPDF("p", "pt", "a4");
    canvasList.forEach((canvas, index) => {
      let imgData = canvas.toDataURL("image/png"); // canvas转图片
      pdf.addImage(imgData, "PNG", 0, 0, 595, 842); // 595  842 a4纸宽高
      if (index < canvasList.length - 1) {
        pdf.addPage(); // 添加新页面
      }
    });
    pdf.save("download.pdf"); // 导出
    window.history.go(-1); // 关闭当前页面
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 595px;
  margin: 0 auto;
  img {
    display: block;
    width: 595px;
    height: 842px;
  }
}
</style>
相关推荐
南风微微吹2 分钟前
【四级】全国大学英语四级历年真题及答案解析PDF电子版(2015-2025年6月)
pdf·英语四级
starxg6 分钟前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
SoberChina1 小时前
Jasperreport 导出word 多个element重叠部分导致不显示(不支持)
pdf·word·jaspersoft·模版打印
reasonsummer2 小时前
【办公类-115-05】20250920职称资料上传04——PDF和PDF合并PDF、图片和PDF合并PDF(十三五PDF+十四五图片)
java·python·pdf
龙仔CLL2 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
缺点内向2 小时前
Java:将 Word 文档转换为密码保护的 PDF 文件
java·pdf·word
龙仔CLL2 小时前
vue3下载图片,pdf,excle,word通用函数
pdf·vue·word
小周同学:11 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
archko15 小时前
android pdf框架-15,mupdf工具与其它
android·pdf
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程