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 是否下载默认为下载,传false不…...
Ubuntu下如何管理多个ssh密钥
Ubuntu下如何管理多个ssh密钥 前言 我一直在逃避这个问题,误以为我能够单纯地用一个 ssh 走天下。 好吧,现实是我不得不管理多个 ssh 做,那就写个博客总结一下吧。 查阅后发现前人已经总结了不少,那我就结合之后ÿ…...
[vulnhub] DarkHole: 1
https://www.vulnhub.com/entry/darkhole-1,724/ 端口扫描主机发现 探测存活主机,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…...
商淘云连锁企业管理五大功能 收银系统助力门店进销存同步
连锁企业管理的五大功能相互协作,共同确保连锁门店能够高效运营、降低成本、提升客户满意度,并最终实现盈利目标。今天,商淘云分享连锁企业管理的五大功能: 1、进销存管理:进销存管理是连锁企业的基础功能之一…...
统信UOS开发环境支持Perl
UOS凭借广泛的编程语言支持,为开发者构建了一个高效灵活的开发环境,无需担心环境兼容性问题。 文章目录 一、环境部署1. Perl开发环境安装2. Perl开发环境配置环境变量配置模块管理器编辑器集成调试工具二、代码示例文件处理Web开发三、常见问题1. 依赖管理问题2. 性能问题3.…...
Stable Diffusion Web UI - ControlNet 姿势控制 openpose
openpose 是 ControlNet 中常用的控制模式之一。 通过 openpose 可以锁定人物姿势,把姿势信息传递给 Stable Diffusion 扩散模型,让其在扩散生成图片的时候遵照特定的任务姿势。 通过 openpose 能够得到类似如下效果: 同样的姿势࿰…...
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中处理跨域请求(CORS, Cross-Origin Resource Sharing)通常有几种方法。跨域请求是指从一个域名的网页去请求另一个域名下的资源。为了安全起见,浏览器会阻止这种请求,除非服务器明确允许。 方法一:使用…...
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插入就可以将开发板启动,串口接UART1,进入Lin…...
分布式唯一ID生成(二): leaf
文章目录 本系列前言号段模式双buffer优化biz优化动态step源码走读 雪花算法怎么设置workerId解决时钟回拨源码走读 总结 本系列 漫谈分布式唯一ID分布式唯一ID生成(二):leaf(本文)分布式唯一ID生成(三&am…...
【开发工具】Git
目录 核心概念基本命令工作流程Commit message Git 是一个分布式版本控制系统,用于跟踪在软件开发过程中对文件的修改。它允许多个开发者协作处理项目,并且可以有效地管理代码的历史记录。以下是 Git 的一些核心概念和功能: 核心概念 仓库 (R…...
【go从零单排】结构嵌套struct embedding
🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 📗概念 在Go语言中,结构体嵌套(struct embedding)是一…...
Django 详细入门介绍
Django 详细入门介绍 1. 什么是 Django? Django 是一个开源的、用 Python 编写的 Web 框架。它遵循了“快速开发”和“不要重复自己”(DRY)的设计原则,旨在简化复杂的 Web 开发。Django 提供了多种强大的功能模块,如…...
万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN
🌺历史文章列表🌺 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络(前馈神经网络与反馈神经网络)、常见算法概要汇总万字长文解读…...
HDR视频技术之二:光电转换与 HDR 图像显示
将自然界中的真实场景转换为屏幕上显示出来的图像,往往需要经过两个主要的步骤:第一个是通过摄影设备,将外界的光信息转换为图像信息存储起来,本质上是存储为数字信号;第二个是通过显示设备,将图像信息转换…...
【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销
一、Linux 概述 1. 应用领域 服务器领域 linux在服务器领域是最强的,因为它免费、开源、稳定。 嵌入式领域 它的内核最小可以达到几百KB, 可根据需求对软件剪裁,近些年在嵌入式领域得到了很大的应用。 主要应用:机顶盒、数字电视、网络…...
Redis的缓存问题与应对策略
Redis 作为一种高效的缓存系统,在高并发环境下应用广泛,但也面临一些缓存问题,以下是常见问题及其应对策略。 1. 缓存穿透 问题描述 缓存穿透是指请求的数据在缓存和数据库中都不存在,但大量请求直接到达数据库,从而给…...
Java项目实战II基于Spring Boot的智慧生活商城系统的设计与实现(开发文档+数据库+源码)
目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着科技的飞速发展,人们的…...
每日一题之成绩排序
在N(N<30)名运动员参加的体操比赛中,有K(K<10)名裁判给每位运动员分别打分, 按规则每名运动员最后得分需去掉一个最高分和一个最低分, 然后把其他裁判的打分相加,计算得出该运…...
QT Widget:使用技巧
1、Qt中的QString和const char *之间转换,最好用toStdString().c_str()而不是toLocal8Bit().constData(),比如在setProperty中如果用后者,字符串中文就会不正确,英文正常。 2、数据库处理一般建议在主线程,如果非要在…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
