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;以下皆在 Ubuntu 操作系统下进行 1 国内源安装 Docker-ce 1.1 配置 Linux 内核流量转发 因为docker和宿主机的端口映射&#xff0c;本质是内核的流量转发功能&#xff0c;所以要对其进行配置 1.1.1 未配置流量转发 如果没有配置流…

火山引擎云服务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…

探索数据科学与大数据技术专业本科生的广阔就业前景

随着信息技术的不断发展&#xff0c;数据科学与大数据技术已经成为各大行业的关键推动力。在这样一个数据驱动的时代&#xff0c;越来越多的企业依赖数据来驱动决策、优化运营和创造价值。因此&#xff0c;数据科学与大数据技术专业的本科生在就业市场上具有广阔的前景和多样的…

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; 基本语法 …

连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常

启动kafka后&#xff0c;连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient) 检查kafka运行日志&#xff0c;报The broker is trying to join the wrong clu…

全文检索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…

K8s使用nfs

改动点 ip和路径改为自己的 --- apiVersion: v1 kind: ServiceAccount metadata:name: nfs-client-provisioner# replace with namespace where provisioner is deployednamespace: nfs-client --- kind: ClusterRole apiVersion: rbac.authorization.k8s.io/v1 metadata:nam…

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

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

Linux命令--paste

简介 paste命令用于合并文件行 参数说明 -d: 自定义间隔符&#xff0c;默认为tab -s&#xff1a;串行处理&#xff0c;非并行 示例 将两个文件&#xff0c;按照行合并 demo1.conf内容如下&#xff1a; name domain ip area user password roledemo2.conf内容如下 test t…

Python批量合并多个PDF

安装pymupdf pip install pymupdf合并PDF文件 合并两个PDF 方法Document.insert_pdf()可以在不同的 PDF 文档之间复制页面。示例&#xff08;doc1和doc2是打开的 PDF&#xff09;&#xff1a; # append complete doc2 to the end of doc1 doc1.insert_pdf(doc2)import fitz…

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

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

Hive中各种Join的实现

一. 数据准备 1. 创建两张表 create table tablea (id int, name string) row format delimited fields terminated by ,; create table tableb (id int, age int) row format delimited fields terminated by ,;2. 准备两份数据 tablea.txt文件数据如下&#xff1a; 1,hua…

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

在快速消费品&#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;通过示例代码实现当前时间的读取和显示。 环…