利用html2canvas + jspdf将页面内容生成pdf并且下载

依赖安装

npm install html2canvas
npm install jspdf

函数调用以及实现(vue)

// 引入
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'const previewEl = document.getElementById('targetDom')
// 函数调用
this.savePdf(previewEl).then(res => {
})// 函数实现savePdf(html2canvasDom, downloadName = '下载文件') {return html2canvas(html2canvasDom, {// width: 1714,// height: 200,backgroundColor: '#fff',useCORS: true, // 解决文件跨域问题scale: window.devicePixelRatio * 2, // 按比例增加分辨率dpi: 300}).then(canvas => {const a4Width = 595.28const a4Height = 841.89// 可以上传后端或者直接显示// 用于将canvas对象转换为base64位编码var context = canvas.getContext('2d')context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falselet position = 0// 生成的画布元素宽高const canvasWidth = canvas.widthconst canvasHeight = canvas.height// 页面等比例缩放后宽高const pageWidth = a4Widthconst pageHeight = (a4Width / canvasWidth) * canvasHeight// 返回图片dataURL,参数:图片格式和清晰度(0-1)const jpeg = canvas.toDataURL('image/jpeg', 1.0)// 第一个参数是纵横向,第二个参数是单位,第三个参数是生成pdf的大小,自定义pdf大小的话可以传入一个数组,eg:[164.14, 424.5]// 方向默认竖直,尺寸ponits,格式a4 [595.28,841.89]// const pdf = new JsPDF('', 'pt', [595.28, 841.89]/* [a4Width, a4Height] */)const pdf = new JsPDF('', 'pt', [605.28, 841.89]/* [a4Width, a4Height] */)// const pdf = new JsPDF('', 'pt', [this.contentWidth, 841.89]/* [a4Width, a4Height] */)// const pdf = new JsPDF('', 'pt', 'a4'/* [a4Width, a4Height] */)// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围,无需分页let height = pageHeightif (height < a4Height) {// 第三,四个参数是图片偏移位置,第五六个参数是生成的图片的宽高pdf.addImage(jpeg, 'JPEG', 5, 5, pageWidth, pageHeight) // 从图片顶部开始打印} else {while (height > 0) {pdf.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight)height -= a4Heightposition -= a4Height// 避免添加空白页if (height > 0) {pdf.addPage()}}}pdf.save(`${downloadName}.pdf`)})}

相关资料记录:
https://juejin.cn/post/7230757380820533303

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

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

相关文章

QImage函数setAlphaChannel

最近使用QImage的函数setAlphaChannel时遇到了一个坑&#xff0c;花了不少时间才弄清楚&#xff1a;在使用这个函数后&#xff0c;图像格式都会变成QImage::Format_ARGB32_Premultiplied。 先看下setAlphaChannel在帮助文档的说明&#xff1a; void QImage::setAlphaChannel(…

cartographer-(0)-ubuntu(20.04)-环境安装

1.安装 ROS wiki.ros.org 1.1修改镜像源&#xff1a; 到网站上找与操作系统相匹配的镜像源 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb htt…

YOLOv7独家改进新颖Neck:RepBiPAN结构升级版,为YOLOv7目标检测打造全新特征融合方式,增强小目标定位精度

💡本篇内容:YOLOv7改进新颖Neck:RepBiPAN 结构升级版,为YOLOv目标检测打造全新特征融合方式,增强小目标定位精度 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv7 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二次创新,YOLOv7专属 全新 RepBi…

【React-hooks篇幅】自定义hooks

首先得了解自定义 Hooks 跟普通函数区别在于哪里&#xff1f; Hooks 只应该在 React 函数组件内调用&#xff0c;而不应该在普通函数调用。Hooks 能够调用诸如 useState、useEffect、useContext等&#xff0c;普通函数则不能。由此可以通过内置的Hooks等来获得Firber的访问方式…

Linux基础指令大全

Linux基础指令大全 1. ls 指令2. pwd命令3. cd 指令4. touch指令5. mkdir指令6. rmdir指令 && rm 指令7. man指令8.cp指令9. mv指令10. cat 指令11. more指令12. less指令13. head指令14. tail指令15. 时间相关的指令1. **在显示方面&#xff0c;使用者可以设定欲显示的…

node中的crypto模块指南

node中的crypto模块指南 加密操作可能很棘手&#xff0c;以至于付费的加密服务公司的存在只是为了确保在代码库中正确实现加密操作。好消息是&#xff0c;只需学习一些知识&#xff0c;我们就可以使用 Node 的内置加密模块免费进行适当的加密。 在本指南中&#xff0c;我们将…

vcpkg切换 Visual Studio 版本

vcpkg切换 Visual Studio 版本 在使用vcpkg作为项目的包管理工具时&#xff0c;可能会遇到需要切换Visual Studio版本的情况。下面是一种简单的方法来实现这个目标&#xff0c;通过修改triplet文件来指定使用的Visual Studio版本。 步骤1: 创建或修改Triplet文件 首先&#…

2023-2024年华为ICT网络赛道模拟题库

2023-2024年网络赛道模拟题库上线啦&#xff0c;全面覆盖网络&#xff0c;安全&#xff0c;vlan考点&#xff0c;都是带有解析 参赛对象及要求&#xff1a; 参赛对象&#xff1a;现有华为ICT学院及未来有意愿成为华为ICT学院的本科及高职院校在校学生。 参赛要求&#xff1a…

基于共生生物优化的BP神经网络(分类应用) - 附代码

基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.共生生物优化BP神经网络3.1 BP神经网络参数设置3.2 共生生物算法应用 4.测试结果…

嵌入式养成计划-32-网络编程----域套接字模型------抓包工具--wireshark

六十九、 域套接字模型 69.1 域套接字的概念 只能做一台主机内的进程间通信&#xff0c;协议族&#xff08;地址族&#xff09;指定为&#xff1a;AF_UNIX AF_LOCALbsp-lcd&#xff1a; s类型文件&#xff0c;就是域套接字如果客户端不手动绑定&#xff0c;则操作系统不会创建…

【苍穹外卖 | 项目日记】第一天

前言&#xff1a; 我打算用16天的时间写完黑马程序员的苍穹外卖项目&#xff0c;为了督促自己每天坚持写以及记录项目知识点&#xff0c;所以用这种项目日记的方式鞭策自己 目录 前言&#xff1a; 今日完结任务&#xff1a; 今日收获&#xff1a; 1.阅读代码框架&#xf…

web中缓存的几种方式

看了构建高性能的web站点一书&#xff0c;对其中的集中web缓存进行一个总结 1 应用程序实现的动态页面缓存 应用程序把动态文件生成的html文件缓存到文件服务器&#xff0c;以后用户请求动态文件&#xff0c;直接从文件服务器加载对应的静态缓存的html文件返回给用户&#xff…

运行vite项目报错:await import(‘source-map-support‘).then((r) => r.default.install())

项目场景&#xff1a; Electron vue3 vite项目实现屏幕截图功能 问题描述 运行 npm run dev 启动项目报错 await import(source-map-support).then((r) > r.default.install()) PS D:\study\electron\electronDemo> npm run dev> electronDemo0.0.1 dev D:\study…

Kafka客户端核心参数详解

这一部分主要是从客户端使用的角度来理解 Kakfa 的重要机制。重点依然是要建立自己脑海中的 Kafka 消费模型。Kafka 的 HighLevel API 使用是非常简单的&#xff0c;所以梳理模型时也要尽量简单化&#xff0c;主线清晰&#xff0c;细节慢慢扩展。 一、从基础的客户端说起 Kaf…

75.颜色分类

原地排序&#xff1a;空间复杂度为1 class Solution { public:void sortColors(vector<int>& nums) {if(0){//法一&#xff1a;单指针两个遍历int nnums.size();int ptr0;for(int i0;i<n;i){if(nums[i]0){swap(nums[i],nums[ptr]);ptr;}}for(int iptr;i<n;i){…

XMLHttpRequest和Fetch API

XMLHttpRequest和Fetch API 1、XMLHttpRequest2、Fetch API总结 简述&#xff1a;XMLHttpRequest和Fetch API是两种常用的JavaScript网络请求方式&#xff0c;可以用来发送HTTP请求并获取服务器响应。 1、XMLHttpRequest XMLHttpRequest&#xff1a;XMLHttpRequest是一种传统的…

EVALUATING HALLUCINATIONS IN CHINESE LARGE LANGUAGE MODELS

本文是LLM系列文章&#xff0c;针对《EVALUATING HALLUCINATIONS IN CHINESE LARGE LANGUAGE MODELS》的翻译。 中文大语言模型的幻觉评价 摘要1 引言2 HALLUQA基准3 实验4 讨论5 相关工作6 结论 摘要 在本文中&#xff0c;我们建立了一个名为HalluQA (Chinese Hallucination…

RabbitMQ安装与简单使用

安装 下载资源 可以访问官网查看下载信息rabbitmq官网 选择合适的版本&#xff0c;注意&#xff1a;rabbitmq需要下载一个Erlang才能使用 我自己是在一下两个连接中下载的 rabbitmq 3.8.8 erlang 21.3.8.15 需要下载其他版本的同学注意erlang版本是否匹配&#xff0c;可以访…

【问题证明】矩阵方程化为特征值方程求得的特征值为什么是全部特征值?不会丢解吗?

问题 这个问题困扰了我好久&#xff0c;一直感觉如果有其他的特征值没法证伪&#xff0c;不过一直存在思想的层面&#xff0c;没有实际解决&#xff0c;今天突然想到动笔来解决&#xff0c;遂得解&#xff0c;证明如下。 证明 总结 这个证明看似证明过后很直观&#xff0c;但…

微信小程序之本地生活(九宫格)

文章目录 一.创建项目二.配置修改json三.编写WXML四.编写WXSS五.最终效果 一.创建项目 创建新的项目&#xff0c;名称为&#xff1a;本地生活 二.配置修改json 在app.json中删除其他页面 将index改为grid 自动生成新的文件 添加自己的轮播图片 源代码&#xff1a; <!--…