jsPDF(高清),html导出多页pdf(分享)

2023-11-15

前言

遇到在html导出PDF的需求,在csdn找了很多关于PDF导出功能的文章,介绍了jsPDF、iText和wkhtmltopdf三种方式。
其中iText的使用对于中文还需要导入特定字体包,wkhtmltopdf需要配置服务器环境,综合考虑,选择了最简单的jsPDF。
很多文章都说jsPDF内容模糊、导出效果失真。谷歌搜了挺久,后来看到这一篇文章:
[转](https://blog.csdn.net/qq_36706878/article/details/111289963)

需要添加canvas画布元素,以及设定对应的尺寸;其中html2canvas的属性dpi的赋值倒显得不是很要紧(注释后,几乎不影响清晰度)。

只截取封面做为对比,修改前效果:
在这里插入图片描述
新增canvas后:
在这里插入图片描述

首先,引入js包:

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

导出pdf函数代码如下:

//pdf
htmltopdf=function() {
   	var element = $(".ui-pdf-content"); // 这个dom元素是要导出pdf的范围div
   	var w = element.width();    // 获得该容器的宽
   	var h = element.height();    // 获得该容器的高
   	var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
   	var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
   	var canvas = document.createElement("canvas");
   	var abs = 0;
   	var win_i = $(window).width();    // 获得当前可视窗口的宽度(不包含滚动条)
   	var win_o = window.innerWidth;    // 获得当前窗口的宽度(包含滚动条)
   	if(win_o>win_i){
   		abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
   	}
   	canvas.width = w * 4;    // 将画布宽&&高放大4倍
   	canvas.height = h * 4;
   	var context = canvas.getContext("2d");
   	context.scale(4, 4);
   	context.translate(-offsetLeft-abs,-offsetTop);
		//这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此translate的时候,要把这个差值去掉
   	html2canvas(element, {
   		allowTaint: true,
   		taintTest: true,
   		canvas: canvas,
   		dpi: 172,//导出pdf清晰度
   		onrendered: function(canvas) {
   			var contentWidth = canvas.width;
   			var 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.28;
   			var imgHeight = 592.28/contentWidth * contentHeight;
   			var 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', 0, 0, imgWidth, imgHeight);
   			} else {    // 分页
   				while(leftHeight > 0) {
   					pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
   					leftHeight -= pageHeight;
   					position -= 841.89;
   					//避免添加空白页
   					if(leftHeight > 0) {
   						pdf.addPage();
   					}
   				}
   			}
   			pdf.save('能耗分析报告'+'.pdf');
   		}
       });
}

样式细节:如果css采用的是transform: translateX(-50%)来实现水平居中(比如我这里封面上的方框,如下图红框所圈),会导致PDF每一页正中位置都有这个方框。
在这里我取消transform: translateX(-50%),用position: absolute的定位来代替,问题解决。
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jsPDF(高清),html导出多页pdf(分享) 的相关文章

随机推荐

  • DCDC电源设计中需要考虑的问题

    一 电子开关设计 1 为什么用MOS管做开关管 2 MOS驱动电路用图腾柱还是用推挽电路 3 MOS悬浮电压设计思想以及工作原理 二 PWM驱动波形 1 频率如何设置 2 占空比如何调整 3 三角波生成电路如何设计 4 比较器参考电压如何选
  • linux下的主要目录

    2019独角兽企业重金招聘Python工程师标准 gt gt gt Linux系统目录结构 登录系统后 在当前命令窗口下输入 ls 你会看到 以下是对这些目录的解释 bin bin是Binary的缩写 这个目录存放着最经常使用的命令 boo
  • 将lgbm模型进行5折交叉验证,并用GridSearchCV进行超参搜索,并打印输出每一折的精度...

    你可以使用 sklearn 的 GridSearchCV 函数来实现 lgbm 模型的 5 折交叉验证和超参数搜索 首先 需要定义模型和要调整的超参数的范围 import lightgbm as lgb from sklearn model
  • 1001 害死人不偿命的(3n+1)猜想 (15分)_Quentin

    题目链接 1001 害死人不偿命的 3n 1 猜想 15分 卡拉兹 Callatz 猜想 对任何一个正整数 n 如果它是偶数 那么把它砍掉一半 如果它是奇数 那么把 3n 1 砍掉一半 这样一直反复砍下去 最后一定在某一步得到 n 1 卡拉
  • 【翻译】知识的诅咒

    巧合的是 本周我和五组不同的人进行了同样的对话 我想我应该把我的想法写下来 并把它们写在博客上 因为这一连串的想法似乎引起了很多人的共鸣 这场对话从一个偏见开始 和我一起工作的许多人是工程师 他们后来可能已经成为高级领导或高管 但他们曾经是
  • ios 固定定位 input获取焦点,ios 滚动条滚动 fixed固定定位失效,位置偏移

    http efe baidu com blog mobile fixed layout 还发现一个问题就是ios input设置readonly 还是能看到光标 然后解决方法是在行内写了 nf cus this blur
  • Zabbix 4.0升级5.0 &&ES 6.1升级7.0

    Zabbix 4 0升级5 0 一 升级方案 1影响范围 升级期间 不会影响到现有的系统 系统将保持正常的运行 升级完成后 将进行一段时间的可用性测试 待系统稳定后将替换生产上的监控 2升级方法 本次升级采用蓝绿部署的方式 先在测试环境重新
  • com中abc.h不能修改,只能修改abc.idl,生成abc.h

    如题 犯了这个错误
  • 小笔记1:在Unity中导入模型后,材质被锁定后无法更改

    每天进步一点点小笔记 解决方案 方法1 在资源里查找到该模型 右侧inspector栏 Materials location选择Use External Material 点击Apply导入便可以编辑 方法2 在资源里查找到该模型 右侧in
  • opkg软件源设置

    opkg软件源定义在 etc opkg distfeeds conf 更新 etc opkg conf并没有什么卵用 文件中 包含软件源索引的目录路径 分为base luci management packages routeing tel
  • live555 流媒体开源库

    live555对每一个从事过流媒体开发的从业者而言 都不曾陌生 就像每一个从事音视频行业的从业者而言 ffmpeg也不曾陌生 随着行业需求的发展 live555也是越见强大 因前几天帮朋友项目查找问题 重拾live555 没想到时隔10年
  • 树莓派修改国内软件源

    编辑sources list文件 sudo nano etc apt sources list 注释掉现有的代码 新增以下代码 deb http mirrors tuna tsinghua edu cn raspbian raspbian
  • 精准营销获客如何成为企业未来的发展趋势 ,运营商大数据

    精准营销最大的优势在于 精准 即在细分市场的基础上 对不同的消费者进行详细分析 确定目标受众 精准营销的主要特点如下 1 数据范围广 可以说是全球数据 目前 中国三大运营商覆盖了数十亿互联网用户 可以说是非常全面的 可以满足各个行业的需求
  • 并发编程系列之原子操作实现原理

    前言 上节我们讲了并发编程中最基本的两个元素的底层实现 同样并发编程中还有一个很重要的元素 就是原子操作 原子本意是不可以再被分割的最小粒子 原子操作就是指不可中断的一个或者一系列操作 那么今天我们就来看看在多处理器环境下Java是如何保证
  • Kali Linux版本手动更新

    Kali Linux版本手动更新 前言 一 查看版本信息 二 更换apt源 三 apt get的使用 四 查看版本信息 总结 前言 学校这几天在上实训课 用到kali 老师推荐下载最新的版本 大家纷纷把原有的kali删了再到官网下最新版本的
  • Sentinel 原理讲解

    Blog Posts Sentinel 为 Dubbo 服务保驾护航 by Eric Zhao 在生产环境中使用 Sentinel 控制台 by Eric Zhao Sentinel 与 Hystrix 的对比 by Eric Zhao G
  • 基于51单片机的停车场车位管理系统

    具体实现功能 由AT89S52单片机 AT24C02数据存储模块 按键模块 LCD1602显示 报警模块等构成 具体功能 1 显示停车场现有车辆数和已停放过车辆数 总共16个车位 指示灯指示具体的车位占用情况 2 可以手动设置总车位数以及剩
  • 回归算法-概述

    回归算法 概述 Regression Algorithms Overview 回归概论 Introduction to Regression Regression is another important and broadly used
  • Upload-labs文件上传漏洞(空格绕过)——Pass06

    0 00 题目描述 似乎可以使用Pass04文件改写 但是感觉应该不会那么简单 0 01 源码分析 is upload false msg null if isset POST submit if file exists UPLOAD PA
  • jsPDF(高清),html导出多页pdf(分享)

    前言 遇到在html导出PDF的需求 在csdn找了很多关于PDF导出功能的文章 介绍了jsPDF iText和wkhtmltopdf三种方式 其中iText的使用对于中文还需要导入特定字体包 wkhtmltopdf需要配置服务器环境 综合