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在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

火山引擎云服务docker 安装

安装 Docker 登录云服务器。 执行以下命令&#xff0c;添加 yum 源。 yum update -y yum install epel-release -y yum clean all yum list依次执行以下命令&#xff0c;添加Docker CE镜像源。更多操作请参考Docker CE镜像。 # 安装必要的一些系统工具 sudo yum install -y yu…

CSS例子: 横向排列的格子

效果 HTML <view class"content"><view class"item" v-for"item of 5">{{item}}</view></view> CSS .content {height: 100vh;display: flex;flex-direction: row; flex-wrap: wrap;align-content: flex-start;backgro…

智能家居的未来:AI让生活更智能还是更复杂?

内容概要 智能家居的概念源于将各种家居设备连接到互联网&#xff0c;并通过智能技术进行控制和管理。随着人工智能的迅速发展&#xff0c;这一领域也迎来了前所未有的机遇。从早期简单的遥控器到如今可以通过手机应用、语音助手甚至是环境感应进行操作的设备&#xff0c;智能…

ios打包文件上传App Store windows工具

在苹果开发者中心上架IOS APP的时候&#xff0c;在苹果开发者中心不能直接上传打包文件&#xff0c;需要下载mac的xcode这些工具进行上传&#xff0c;但这些工具无法安装在windows或linux电脑上。 这里&#xff0c;我们可以不用xcode这些工具来上传&#xff0c;可以用国内的香…

ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染

一、组件基础 1.什么是ArkTS ArkTS是HarmoyOS优选的助力应用开发的语言&#xff0c;ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步的扩展&#xff0c;继承了TS所有的特性&#xff0c;是TS的超集。 扩展的能力如下&#xff1a; 基本语法 …

全文检索ElasticSearch到底是什么?

学习ElasticSearch之前&#xff0c;我们先来了解一下搜索 1 搜索是什么 ① 概念&#xff1a;用户输入想要的关键词&#xff0c;返回含有该关键词的所有信息。 ② 场景&#xff1a; ​ 1互联网搜索&#xff1a;谷歌、百度、各种新闻首页&#xff1b; ​ 2 站内搜索&#xff…

大众汽车合肥社招入职笔试测评SHL题库:综合能力、性格问卷、英语口语真题考什么?

大众汽车合肥社招入职笔试测评包括综合能力测试、性格问卷和英语口语测试。以下是各部分的具体内容&#xff1a; 1. **综合能力测试**&#xff1a; - 这部分测试需要46分钟完成&#xff0c;建议准备计算器和纸笔。 - 测试内容涉及问题解决能力、数值计算能力和逻辑推理能力。 -…

Docker-软件容器平台

一、容器 1、什么是容器 容器就是将软件打包成标准化单元&#xff0c;以用于开发、交付和部署 容器镜像是轻量的、可执行的独立软件包 &#xff0c;包含软件运行所需的所有内容&#xff1a;代码、运行时环境、系统工具、系统库和设置。容器化软件适用于基于 Linux 和 Windows…

Spring Boot集成Access DB实现数据导入和解析

1.什么是Access DB&#xff1f; microsoft office access是由微软发布的关联式 数据库管理系统。它结合了 microsoft jet database engine 和 图形用户界面两项特点&#xff0c;是一种关系数据库工具。它在很多地方得到广泛使用&#xff0c;例如小型企业&#xff0c;大公司的部…

WSL开发--利用Git连接远程仓库(详细步骤)

这篇文章主要介绍了如何将本地项目推送到 GitLab 上&#xff0c;并且避免每次提交都需要输入用户名和密码。文中分步讲解了配置 GitLab SSH 密钥以及配置 Git 远程仓库地址的方法。以下是文章的优化和简洁版&#xff1a; 将本地项目推送到 GitLab 并配置 SSH 免密登录 为了方便…

快消零售行业企业员工培训的数字化转型

在快速消费品&#xff08;FMCG&#xff09;行业中&#xff0c;员工培训对于保持企业的竞争力至关重要。随着电子商务的兴起和消费者行为的变化&#xff0c;快消零售行业需要不断适应新的市场趋势。数字化转型为员工培训提供了新的机遇&#xff0c;尤其是在构建在线培训知识库方…

java的体系结构

1. 题记&#xff1a; 其实很早就打算来写java的体系结构这一文章&#xff0c;但是有诸多担忧就一直搁置。其一担心自己水平有限&#xff0c;恐不能讲得太透彻&#xff0c;因为java的体系结构宏大精深。其二不知道怎么去把控文章的难度及深度&#xff0c;因为需要给大部分看&am…

基于STM32的实时时钟(RTC)教学

引言 实时时钟&#xff08;RTC&#xff09;是微控制器中的一种重要功能&#xff0c;能够持续跟踪当前时间和日期。在许多应用中&#xff0c;RTC用于记录时间戳、定时操作等。本文将指导您如何使用STM32开发板实现RTC功能&#xff0c;通过示例代码实现当前时间的读取和显示。 环…

探索开放资源上指令微调语言模型的现状

人工智能咨询培训老师叶梓 转载标明出处 开放模型在经过适当的指令调整后&#xff0c;性能可以与最先进的专有模型相媲美。但目前缺乏全面的评估&#xff0c;使得跨模型比较变得困难。来自Allen Institute for AI和华盛顿大学的研究人员们进行了一项全面的研究&#xff0c;探索…

使用k8s管理应用以及java案例

使用k8s管理应用 制作镜像控制器管理podpod数据持久化创建service四层代理创建ingress规则对外发布应用日志与监控应用案例(因无开发代码&#xff0c;最终跑不起来)编写java代码编写 Dockerfile构建 Docker 镜像在 Kubernetes 上运行应用程序创建 Kubernetes 服务service创建in…

【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection

1.论文介绍 CamoFormer: Masked Separable Attention for Camouflaged Object Detection CamoFormer&#xff1a;用于隐藏目标检测的掩蔽可分离注意力 TPAMI 2024 Paper Code 2.摘要 如何从背景中识别和分割隐藏的对象是一个挑战。受transformer中多头自注意的启发&#xf…

【从零开始的LeetCode-算法】3254. 长度为 K 的子数组的能量值 I

给你一个长度为 n 的整数数组 nums 和一个正整数 k 。一个数组的 能量值 定义为&#xff1a; 如果 所有 元素都是依次 连续 且 上升 的&#xff0c;那么能量值为 最大 的元素。否则为 -1 。 你需要求出 nums 中所有长度为 k 的子数组的能量值。 请你返回一个长度为 n - k 1…

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略

LLMs之PDF&#xff1a;zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略 目录 zeroX的简介 1、支持的文件类型 zeroX的安装和使用方法 T1、Node.js 版本&#xff1a; 安装 使用方法 使用文件 URL&#xff1a; 使用本地路径&…

qt QStandardItemModel详解

1、概述 QStandardItemModel是Qt框架中提供的一个基于项的模型类&#xff0c;用于存储和管理数据&#xff0c;这些数据可以以表格的形式展示在视图控件&#xff08;如QTableView、QTreeView等&#xff09;中。QStandardItemModel支持丰富的数据操作&#xff0c;包括添加、删除…

思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!

文章目录 前言1. 下载运行Ollama框架2. Ollama下载大语言模型3. 思源笔记设置连接Ollama4. 测试笔记智能辅助写作5. 安装Cpolar工具6. 配置Ollama公网地址7. 笔记设置远程连接Ollama8. 固定Ollama公网地址 前言 今天我们要聊聊如何通过cpolar内网穿透技术&#xff0c;把国产笔…