html转pdf、Img

一.转pdf

// 导出页面为PDF格式
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'/*** @param  ele          要生成 pdf 的DOM元素(容器)* @param  padfName     PDF文件生成后的文件名字* */function downloadPDF(ele, pdfName) {let eleW = ele.offsetWidth// 获得该容器的宽let eleH = ele.offsetHeight// 获得该容器的高let eleOffsetTop = ele.offsetTop  // 获得该容器到文档顶部的距离let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离var canvas = document.createElement('canvas')var abs = 0let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度(不包含滚动条)let win_out = window.innerWidth // 获得当前窗口的宽度(包含滚动条)if (win_out > win_in) {// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半abs = (win_out - win_in) / 2    // 获得滚动条宽度的一半// console.log(a, '新abs');}canvas.width = eleW * 2    // 将画布宽&&高放大两倍canvas.height = eleH * 2var context = canvas.getContext('2d')context.scale(2, 2)context.translate(-eleOffsetLeft - abs, -eleOffsetTop)// 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此// translate的时候,要把这个差值去掉// html2canvas(element).then( (canvas)=>{ //报错// html2canvas(element[0]).then( (canvas)=>{html2canvas(ele, {dpi: 300,// allowTaint: true,  //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。}).then((canvas) => {var contentWidth = canvas.widthvar contentHeight = canvas.height//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89//未生成pdf的html页面高度var leftHeight = contentHeight//页面偏移var position = 0//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28var imgHeight = 595.28 / contentWidth * contentHeightvar pageData = canvas.toDataURL('image/jpeg', 1.0)var pdf = new JsPDF('', 'pt', 'a4')//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围,无需分页if (leftHeight < pageHeight) {//在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;pdf.addImage(pageData, 'JPEG', 80, 0, imgWidth, imgHeight)// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);} else {    // 分页while (leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight > 0) {pdf.addPage()}}}//可动态生成pdf.save(pdfName)})
}export default {downloadPDF
}

二.转img

import html2canvas from 'html2canvas'
/*** element 导出得元素* filename 文件名* ext  扩展文件名
*/export function exportImg(element, filename, ext){html2canvas(element, {useCORS: true}).then(canvas=>{if (navigator.msSaveBlob) {const blob = canvas.msToBlob() // IE10+return navigator.msSaveBlob(blob, name)} else {const imageurl = canvas.toDataURL('image/png')const aLink = document.createElement('a') // 创建a标签aLink.style.display = 'none'aLink.href = imageurlaLink.download = `${filename}.${ext}` // 下载文件名document.body.appendChild(aLink)aLink.click()document.body.removeChild(aLink) // 用完后移除元素}})
}

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

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

相关文章

Apache Doris (四十八): Doris表结构变更-替换表

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录

Leetcode—275.H指数II【中等】

2023每日刷题&#xff08;十三&#xff09; Leetcode—275.H指数II 算法思想 实现代码 int minValue(int a, int b) {return a < b ? a : b; }int hIndex(int* citations, int citationsSize){int left, right;left 0;right citationsSize - 1;while(left < right) …

Openssl数据安全传输平台017:Linux客户端代码的编译与调试-Bug记录

文章目录 1 在windows上先预编译2 Centos上进入项目文件夹进行编译2.0 最终的编译指令2.1 找不到lprotobuf&#xff0c;找不到protobuf的google文件夹2.1.1 编译指令及提示2.1.2 问题分析2.1.3 解决办法 2.2 json类中方法unreference2.2.1 编译指令及提示2.2.2 问题分析 *** 最…

【工具使用】NPS内网穿透工具介绍

文章目录 前言一、内网穿透二、NPS概述三、NPS原理四、NPS服务器搭建(一)云服务器配置 五、NPS内网穿透演示(一)演示案例一(二)演示案例二 六、NPS内网穿透检测建议(一)流量监控(二)流量协议分析(三)网络行为异常检测 七、NPS内网穿透防范建议(一)阻止或隔离流量(二)更新和强化…

samatraPDF不能inverse search解决方法

samatraPDF Texlive VSCode的配置&#xff1a;https://zhuanlan.zhihu.com/p/434142338不能跳转&#xff0c;在 VSCode中设置json文件参考https://forum.sumatrapdfreader.org/t/inverse-search-not-performed-for-vs-code-exe/4486 The solution which worked for me is the…

[架构之路-245/创业之路-76]:目标系统 - 纵向分层 - 企业信息化的呈现形态:常见企业信息化软件系统 - 企业资源管理计划ERP

目录 前言&#xff1a; 一、企业信息化的结果&#xff1a;常见企业信息化软件 1.1 企业资源管理计划 1.1.1 什么是ERP&#xff1a;企业最常用的信息管理系统 1.1.2 ERP的演进过程 1.1.3 EPR模块 1.1.4 EPR五个层级 1.1.5 企业EPR业务总体流程图 1.1.6 什么类型的企业需…

C++ Qt关于启动可执行文件存在的问题

如果软件具有管理员权限。请略过 使用QProcess 如果不具有管理员权限 启动可执行文件&#xff0c;在Debug和Release中没有问题&#xff0c;但是如果可执行文件启动需要管理员权限&#xff0c;调用函数startDetached&#xff0c;win10/11去要在点击用户账户控制弹窗 当使用I…

day39(VueJS)vuejs的概念与要点,选项种类,经典案例,双向绑定的底层原理

选项的概念与要点 data&#xff0c;methods&#xff0c;computed 等可以选择添加使用&#xff0c;称之为选项 注意&#xff1a;vue组件中的选项&#xff08;data&#xff0c;methods&#xff0c;computed&#xff0c;...&#xff09;名字是不能随意更改的&#xff0c;也是不能重…

常用 sqlite3 命令

本次将向您讲解 SQLite 编程人员所使用的简单却有用的命令。这些命令被称为 SQLite 的点命令&#xff0c;这些命令的不同之处在于它们不以分号 ; 结束。 让我们在命令提示符下键入一个简单的 sqlite3 命令&#xff0c;在 SQLite 命令提示符下&#xff0c;您可以使 用各种 …

【MyBatis Plus】初识 MyBatis Plus,在 Spring Boot 项目中集成 MyBatis Plus,理解常用注解以及常见配置

文章目录 一、初识 MyBatis Plus1.1 MyBatis Plus 是什么1.2 MyBatis Plus 和 MyBatis 的区别 二、在 Spring Boot 项目中集成 MyBatis Plus2.1 环境准备2.2 引入 MyBatis Plus 依赖2.3 定义 Mapper2.4 测试 MyBatis Plus 的使用 三、MyBatis Plus 常用注解3.1 为什么需要注解3…

谈谈我对 Reacitive 方法的理解

本文我想和大家分享一下我对当前 Reactivity 方法和现状的理解。我并不是说我的观点就是对的&#xff0c;但我认为&#xff0c;正是通过分享自己的观点&#xff0c;我们才能对行业中的事物达成共识&#xff0c;我希望这些来之不易的见解能够对其他人有所帮助&#xff0c;并补充…

【C++初探:简单易懂的入门指南】二

【C初探&#xff1a;简单易懂的入门指南】二 1.引用1.1引用做函数的参数1.2 引用做返回值1.2.1 关于引用做返回值的几点补充 1.3 多引用(对一个变量取多个别名)1.4 引用类型一致性原则以及权限的问题阐述1.5引用的效率问题1.6引用和指针的比较 2.auto关键字2.1 auto关键字的使用…

react中的forwardRef 和memo的区别?

文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端面试 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错…

VUE重学

v-if和v-show的区别&#xff1a; v-if是按条件渲染&#xff0c;因为他确保在切换时&#xff0c;条件区块内的事件监听器和子组件都会被销毁和重建&#xff0c;也是惰性的&#xff0c;如果初次渲染条件为false&#xff0c;则不会做任何事&#xff0c;只有true才会渲染 v-show:无…

springMVC 面试题

一、springMVC 面试题 1.Spring MVC的常用注解由有哪些&#xff1f; Controller&#xff1a; 用于标识此类的实例的是一个控制器 RequestMapping: 映射url路劲 ReponseBody: 返回JSON数据 RequestBody&#xff1a;将JSON数据转换为json数据&#xff0c;将json数据转换为Ja…

共谈信创谋发展 | 开源网安主办的信创生态构建沙龙圆满完成

​10月26日&#xff0c;由珠海市工业和信息化局、珠海市高新区科技创新和产业发展局指导&#xff0c;珠海华发产业园与开源网安珠海公司等联合主办的“赋能数字转型 提速国产替代”—Uni-Idea信创生态构建沙龙在华发信创产业园成功举办&#xff0c;近百位行业代表参加本次活动&…

使用requests库进行HTTP爬虫编程

目录 一、安装requests库 二、发送HTTP请求 三、解析HTML页面 四、处理HTTP响应和异常 五、使用代理和会话管理 六、使用多线程或多进程提高效率 七、数据存储和处理 八、注意事项和总结 在当今的数字化世界中&#xff0c;数据已经成为了一种宝贵的资源。而网络爬虫程序…

使用SweetAlert2 弹层(模态,提示框,过几秒消失......等等)

最近在做一个Asp.net MVC的项目&#xff0c;里面用部分视图页弹层&#xff0c;感觉很不爽&#xff0c;用着别扭。在前后端分离的项目里&#xff0c;我们肯定用封装好的前端UI库了&#xff0c;比如element ui&#xff0c;但是 Asp.net MVC的项目里面集成这个比较困难...... 就找…

基本微信小程序的体检预约小程序

项目介绍 我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;体检预约系统小程序被用户普遍使用&#xff0c;为方便用户…

使用ControlNet生成视频(Pose2Pose)

目录 ControlNet 介绍 ControlNet 14种模型分别是用来做什么的 ControlNet 运行环境搭建 用到的相关模型地址 ControlNet 介绍 ControlNet 是一种用于控制扩散模型的神经网络结构&#xff0c;可以通过添加额外的条件来实现对图像生成的控制。它通过将神经网络块的权重复制到…