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

vue中html如何转成pdf下载,pdf转base64,忽略某个元素渲染在pdf中,方法封装

一、下载 html2Canvas jspdf

npm install jspdf   html2canvas

二、封装转换下载方法 htmlToPdf.js

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'/*** @param {*} reportName 下载时候的标题* @param {*} isDownload  是否下载默认为下载,传false不下载*/
export default function (dom, reportName = '文件', isDownload = false) {if (!dom) {return}// document.getElementById('hideDom').style.display='none'//  var target = document.getElementsByClassName("right-aside")[0];// target.style.background = "#FFFFFF";return new Promise((resolve, reject) => {html2Canvas(dom, {allowTaint: true,dpi: window.devicePixelRatio * 2,useCORS: true,}).then((canvas) => {console.log('canvas: ', canvas);let contentWidth = canvas.widthlet contentHeight = canvas.height//一页pdf显示html页面生成的canvas高度;let pageHeight = contentWidth / 592.28 * 841.89//未生成pdf的html页面高度let leftHeight = contentHeight//页面偏移let position = 0//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4', true)//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围,无需分页if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight, undefined, 'FAST')} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight, undefined, 'FAST')leftHeight -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight > 0) {PDF.addPage()}}}if (isDownload) {PDF.save(reportName + '.pdf')}/*** output可选参数* arraybuffer* blob* bloburi* datauristring* datauri* dataurlnewwindow* pdfobjectnewwindow* pdfjsnewwindow*/// const pdfBlob = pdf.output('blob')//别的方法:pdf.output("dataurlstring").split("base64,")[1]是base64,//实际上pdf.output("dataurlstring")就是base64//const dataurl = `data:application/pdf;base64,${PDF.output('dataurlstring').split('base64,')[1]}`var pdfData = PDF.output('datauristring')//获取base64Pdfresolve(pdfData)}).catch(err => {console.log('err: ', err);reject(err)})})
}

三、vue页面使用

  <button @click="onGeneratePDF">生成 PDF</button><div : id="htmlToPdfDom"><div>内容内容内容</div><div>内容内容内容</div><div :data-html2canvas-ignore="true">我是页面显示的元素,pdf不显示的元素,标签增加一个:data-html2canvas-ignore="true"属性即可</div></div>//引入封装的js方法
import htmlToPdf  from './htmlToPdf.js'//按钮点击的方法
onGeneratePDF () {this.$nextTick(() => {htmlToPdf(document.getElementById('htmlToPdfDom'),'自定义下载pdf的文件名',true).then(res=>{console.log('我是pdf转的base64',res)console.log('需要传给后端base64可以在此请求接口')})})}

四、html2canvas直通车

html2canvas中文文档链接:https://www.html2canvas.cn/html2canvas-configuration.html在这里插入图片描述
在这里插入图片描述

相关文章:

vue中html如何转成pdf下载,pdf转base64,忽略某个元素渲染在pdf中,方法封装

一、下载 html2Canvas jspdf npm install jspdf html2canvas二、封装转换下载方法 htmlToPdf.js import html2Canvas from html2canvas import JsPDF from jspdf/*** param {*} reportName 下载时候的标题* param {*} isDownload 是否下载默认为下载&#xff0c;传false不…...

Ubuntu下如何管理多个ssh密钥

Ubuntu下如何管理多个ssh密钥 前言 ‍ 我一直在逃避这个问题&#xff0c;误以为我能够单纯地用一个 ssh 走天下。 好吧&#xff0c;现实是我不得不管理多个 ssh 做&#xff0c;那就写个博客总结一下吧。 查阅后发现前人已经总结了不少&#xff0c;那我就结合之后&#xff…...

[vulnhub] DarkHole: 1

https://www.vulnhub.com/entry/darkhole-1,724/ 端口扫描主机发现 探测存活主机&#xff0c;184是靶机 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 09:59 CST Nmap scan report for 192.168.75.1 Host is up (0.00027s latency). MA…...

商淘云连锁企业管理五大功能 收银系统助力门店进销存同步

连锁企业管理的五大功能相互协作&#xff0c;共同确保连锁门店能够高效运营、降低成本、提升客户满意度&#xff0c;并最终实现盈利目标。今天&#xff0c;商淘云分享连锁企业管理的五大功能&#xff1a; 1、进销存管理&#xff1a;进销存管理是连锁企业的基础功能之一&#xf…...

统信UOS开发环境支持Perl

UOS凭借广泛的编程语言支持,为开发者构建了一个高效灵活的开发环境,无需担心环境兼容性问题。 文章目录 一、环境部署1. Perl开发环境安装2. Perl开发环境配置环境变量配置模块管理器编辑器集成调试工具二、代码示例文件处理Web开发三、常见问题1. 依赖管理问题2. 性能问题3.…...

Stable Diffusion Web UI - ControlNet 姿势控制 openpose

openpose 是 ControlNet 中常用的控制模式之一。 通过 openpose 可以锁定人物姿势&#xff0c;把姿势信息传递给 Stable Diffusion 扩散模型&#xff0c;让其在扩散生成图片的时候遵照特定的任务姿势。 通过 openpose 能够得到类似如下效果&#xff1a; 同样的姿势&#xff0…...

java中Json字符串转换

文章目录 map与json互转map转jsonmap形式的json转map list与json互转list转jsonlist形式的json转list map形式的json串中含有列表转列表 map与json互转 map转json JSONObject.toJSONString(map); public static void main(String[] args) {Map<String, Object> map n…...

springboot处理跨域请求

在Spring Boot中处理跨域请求&#xff08;CORS, Cross-Origin Resource Sharing&#xff09;通常有几种方法。跨域请求是指从一个域名的网页去请求另一个域名下的资源。为了安全起见&#xff0c;浏览器会阻止这种请求&#xff0c;除非服务器明确允许。 方法一&#xff1a;使用…...

S32G-VNP-RDB2开发环境搭建

下载官方镜像 刷机 cat /proc/partition or df -lh //查看sdcard卡再/dev目录挂在点 export DEVSD/dev/sdb sudo dd iffsl-image-auto-s32g274ardb2.sdcard of${DEVSD} bs1M && sync以上将SD-card插入就可以将开发板启动&#xff0c;串口接UART1&#xff0c;进入Lin…...

分布式唯一ID生成(二): leaf

文章目录 本系列前言号段模式双buffer优化biz优化动态step源码走读 雪花算法怎么设置workerId解决时钟回拨源码走读 总结 本系列 漫谈分布式唯一ID分布式唯一ID生成&#xff08;二&#xff09;&#xff1a;leaf&#xff08;本文&#xff09;分布式唯一ID生成&#xff08;三&am…...

【开发工具】Git

目录 核心概念基本命令工作流程Commit message Git 是一个分布式版本控制系统&#xff0c;用于跟踪在软件开发过程中对文件的修改。它允许多个开发者协作处理项目&#xff0c;并且可以有效地管理代码的历史记录。以下是 Git 的一些核心概念和功能&#xff1a; 核心概念 仓库 (R…...

【go从零单排】结构嵌套struct embedding

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在Go语言中&#xff0c;结构体嵌套&#xff08;struct embedding&#xff09;是一…...

Django 详细入门介绍

Django 详细入门介绍 1. 什么是 Django&#xff1f; Django 是一个开源的、用 Python 编写的 Web 框架。它遵循了“快速开发”和“不要重复自己”&#xff08;DRY&#xff09;的设计原则&#xff0c;旨在简化复杂的 Web 开发。Django 提供了多种强大的功能模块&#xff0c;如…...

万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN

&#x1f33a;历史文章列表&#x1f33a; 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络&#xff08;前馈神经网络与反馈神经网络&#xff09;、常见算法概要汇总万字长文解读…...

HDR视频技术之二:光电转换与 HDR 图像显示

将自然界中的真实场景转换为屏幕上显示出来的图像&#xff0c;往往需要经过两个主要的步骤&#xff1a;第一个是通过摄影设备&#xff0c;将外界的光信息转换为图像信息存储起来&#xff0c;本质上是存储为数字信号&#xff1b;第二个是通过显示设备&#xff0c;将图像信息转换…...

【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销

一、Linux 概述 1. 应用领域 服务器领域 linux在服务器领域是最强的&#xff0c;因为它免费、开源、稳定。 嵌入式领域 它的内核最小可以达到几百KB, 可根据需求对软件剪裁&#xff0c;近些年在嵌入式领域得到了很大的应用。 主要应用&#xff1a;机顶盒、数字电视、网络…...

Redis的缓存问题与应对策略

Redis 作为一种高效的缓存系统&#xff0c;在高并发环境下应用广泛&#xff0c;但也面临一些缓存问题&#xff0c;以下是常见问题及其应对策略。 1. 缓存穿透 问题描述 缓存穿透是指请求的数据在缓存和数据库中都不存在&#xff0c;但大量请求直接到达数据库&#xff0c;从而给…...

Java项目实战II基于Spring Boot的智慧生活商城系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着科技的飞速发展&#xff0c;人们的…...

每日一题之成绩排序

在N&#xff08;N<30&#xff09;名运动员参加的体操比赛中&#xff0c;有K&#xff08;K<10&#xff09;名裁判给每位运动员分别打分&#xff0c; 按规则每名运动员最后得分需去掉一个最高分和一个最低分&#xff0c; 然后把其他裁判的打分相加&#xff0c;计算得出该运…...

QT Widget:使用技巧

1、Qt中的QString和const char *之间转换&#xff0c;最好用toStdString().c_str()而不是toLocal8Bit().constData()&#xff0c;比如在setProperty中如果用后者&#xff0c;字符串中文就会不正确&#xff0c;英文正常。 2、数据库处理一般建议在主线程&#xff0c;如果非要在…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...