当前位置: 首页 > 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…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...