当前位置: 首页 > article >正文

vue2中使用jspdf插件实现页面自定义块pdf下载

pdf下载

  • 实现pdf下载的环境
  • 安装jspdf插件
  • 在项目中使用

实现pdf下载的环境

在这里插入图片描述
项目需求案例背景,点击【pdf下载】按钮,弹出pdf下载弹窗,显示需要下载四个模块的下载进度,下载完成后,关闭弹窗即可!

  • 项目使用的是Vue2,版本为^2.5.10;
  • jspdf插件版本为^2.5.1
  • html2canvas插件版本为^1.4.1

安装jspdf插件

npm install jspdf@2.5.1
npm install html2canvas@1.4.1

在项目中使用

下面是在项目中的使用相关的代码包括引入,状态,以及相关函数,模版的代码就直接省略掉了;仅供大家参考;

import JsPDF from "jspdf";
import html2Canvas from "html2canvas";
 data(){return {pdfDownLoadStatus:false,pdfDownLoadSteps:[],}}

点击事件以及相关函数

//点击pdf下载按钮事件downPdf(){//pdf下载状态开启this.pdfDownLoadStatus = true;//需要截屏的区域,用在渲染pdf下载弹窗进度里面的内容//code为页面下载区域的idthis.pdfDownLoadSteps = [{ code: "idxxx1", name: "xx基本信息", status: "wait" },{ code: "idxxx2", name: 'xx列表', status: "wait" },{ code: "idxxx3", name: 'xx效果', status: "wait" },{ code: "idxxx4", name: 'xx意见', status: "wait" },];//打开pdf下载进度弹框,这里就这个弹窗模版中代码就省略掉了this.$refs.pdfDownloadModal.open();//pdf下载相关函数this.getPdf('下载文件名称');}async getPdf(title){let PDF = new JsPDF({unit: 'pt',format: 'a4',orientation: 'p',});let A4_WIDTH = 595.28let A4_HEIGHT = 841.89//pdf添加内容y轴起始位置let position = 0//判断是否有下载内容if (this.pdfDownLoadSteps && this.pdfDownLoadSteps.length > 0) {//y:pdf截屏区域的下标for (let y = 0 ; y < this.pdfDownLoadSteps.length ; y++) {//折叠面板let item = this.pdfDownLoadSteps[y];//开始item.status = 'valid';//将折叠面板转为canvas元素添加到pdf实例await this.toCanvasPanel(PDF, position, document.querySelector("#" + item.code), A4_WIDTH, A4_HEIGHT).then((data)=>{position = data.pdfPosition;this.generatePdf(item, this.pdfDownLoadSteps, y, title, PDF);});}}},/*** 生成PDF* @param item 当前区域下载状态* @param pdfDownLoadSteps 截屏的区域名* @param y 当前区域下标* @param title 文件标题* @param PDF*/generatePdf(item, pdfDownLoadSteps, y, title, PDF) {//完成item.status = 'success';//最后一个截屏区域if (y == this.pdfDownLoadSteps.length - 1) {PDF.save(title + '.pdf');//pdf下载状态取消this.pdfDownLoadStatus = false;}},/*** 将折叠面板转为canvas元素添加到pdf实例* @param PDF* @param position 添加内容的起始位置* @param dom* @param imgWidth 图片宽度* @param pdfHeight pdf页高* @returns {Promise<unknown>}*/toCanvasPanel(PDF, position, dom, imgWidth, pdfHeight){var p = new Promise(function(resolve, reject){html2Canvas(dom, {background: "#FFF"}).then(function (canvas) {//获取canavs转化后的宽度let contentWidth = canvas.width;//获取canavs转化后的高度let contentHeight = canvas.height;//高度转化为PDF的高度let imgHeight = imgWidth / contentWidth * contentHeight;//转化成图片Datalet pageData = canvas.toDataURL('image/jpeg', 1.0);//PDF当前页剩余高度let pageResidue = pdfHeight - position;//添加图片到pdfPDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);//图片高度>PDF当前页剩余高度if (imgHeight > pageResidue) {//图片剩余高度=图片高度-当前页剩余高度let imgResidue = imgHeight - pageResidue;while (imgResidue > 0) {//下一页起始位置=图片剩余高度-图片高度position = imgResidue - imgHeight;//图片剩余高度-PDF高度,获取图片剩余高度imgResidue -= pdfHeight;//增加分页PDF.addPage();PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);}}//下次截屏的起始位置position = position.add(imgHeight);resolve({'state': false, 'pdfPosition': position});})});return p;},
http://www.lryc.cn/news/2403062.html

相关文章:

  • 如何防止服务器被用于僵尸网络(Botnet)攻击 ?
  • 基于cornerstone3D的dicom影像浏览器 第二十九章 自定义菜单组件
  • 【Block总结】DBlock,结合膨胀空间注意模块(Di-SpAM)和频域模块Gated-FFN|即插即用|CVPR2025
  • 【学习笔记】单例类模板
  • 字符串加密(华为OD)
  • 口罩佩戴检测算法AI智能分析网关V4工厂/工业等多场景守护公共卫生安全
  • Double/Debiased Machine Learning
  • HarmonyOS Next 弹窗系列教程(4)
  • 【C】-递归
  • 飞马LiDAR500雷达数据预处理
  • Kerberos面试内容整理-在 Linux/Windows 中的 Kerberos 实践
  • 在 Allegro PCB Editor 中取消(解除或删除)已创建的 **Module** 的操作指南
  • 基于springboot的校园社团信息系统的设计与实现
  • nodejs里面的http模块介绍和使用
  • mamba架构和transformer区别
  • 嵌入式鸿蒙开发环境搭建操作方法与实现
  • 在 Spring Boot 中使用 WebFilter:实现请求拦截、日志记录、跨域处理等通用逻辑!
  • CSS预处理器:Sass与Less的语法和特性(含实际案例)
  • QT常用控件(1)
  • 明基编程显示器终于有优惠了,程序员快来,错过等一年!
  • 【计算机网络】非阻塞IO——select实现多路转接
  • Figma 中构建 Master Control Panel (MCP) 的完整设计方案
  • 什么是权威解析服务器?权威解析服务器哪些作用?
  • LeetCode--23.合并k个升序链表
  • ComfyUI 工作流
  • 使用glide 同步获取图片
  • 【推荐算法】NeuralCF:深度学习重构协同过滤的革命性突破
  • 负载均衡相关基本概念
  • 服务器中日志分析的作用都有哪些
  • 【React】useId