当前位置: 首页 > 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在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/481109.html

相关文章:

  • Ubuntu下如何管理多个ssh密钥
  • [vulnhub] DarkHole: 1
  • 商淘云连锁企业管理五大功能 收银系统助力门店进销存同步
  • 统信UOS开发环境支持Perl
  • Stable Diffusion Web UI - ControlNet 姿势控制 openpose
  • java中Json字符串转换
  • springboot处理跨域请求
  • S32G-VNP-RDB2开发环境搭建
  • 分布式唯一ID生成(二): leaf
  • 【开发工具】Git
  • 【go从零单排】结构嵌套struct embedding
  • Django 详细入门介绍
  • 万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN
  • HDR视频技术之二:光电转换与 HDR 图像显示
  • 【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销
  • Redis的缓存问题与应对策略
  • Java项目实战II基于Spring Boot的智慧生活商城系统的设计与实现(开发文档+数据库+源码)
  • 每日一题之成绩排序
  • QT Widget:使用技巧
  • 深入Zookeeper节点操作:高级功能与最佳实践
  • 【C++】map和set的介绍及使用
  • 从0开始搭建一个生产级SpringBoot2.0.X项目(十)SpringBoot 集成RabbitMQ
  • GNU/Linux - /proc/sys/vm/drop_caches
  • ubuntu 22.04 如何调整进程启动后能打开的文件数限制
  • linux基础-完结(详讲补充)
  • LoRA:大型语言模型(LLMs)的低秩适应;低秩调整、矩阵的低秩与高秩
  • 游戏引擎学习第四天
  • GIT GUI和 GIT bash区别
  • 丹摩征文活动|Faster-Rcnn-训练与测试详细教程
  • 星期-时间范围选择器 滑动选择时间 最小粒度 vue3