纯前端--原生js将html页面变成pdf文件（html2canvas+jsPDF）

2024-03-21 4760阅读

一、html2canvas – 将dom变成图片：

下载或者安装html2canvas：官网

1、将文档放在本地，用原生js进行引用和使用。

① 新建一个名为 html2canvas.min.js 的文件，并且将线上的内容进行复制。

纯前端--原生js将html页面变成pdf文件（html2canvas+jsPDF） 第1张
（）

② 引入 js 文件：

// js直接引入 -- 未尝试

// layui使用
// 首先在html2canvas.js文件中添加exports
layui.define([],function(exports){
    // 复制的内容...
    exports('html2canvas',html2canvas);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
	exports("conf", {
	    // 第三方扩展
		extend: {
			// 引入html转图片的插件
			html2canvas: "lay/extends/html2canvas.min",
		}
	}
})
2、使用 npm 进行安装使用：

待续。。。

纯前端--原生js将html页面变成pdf文件（html2canvas+jsPDF） 第2张
（）

二、jsPDF – 将图片变成pdf：

下载或者安装jsPDF ：

  • github
  • 中文网站
  • CDN
    • Jspdf.es.js：ES 2015 模块格式。
    • Jspdf.umd.js：UMD模块格式，用于 AMD 或脚本标签加载。
    • Jspdf.polyfills.js：Internet Explorer等旧浏览器所需的兼容文件。
      1、将文档放在本地，用原生js进行引用和使用。

      ① 新建一个名为 jsPDF.min.js 的文件，并且将线上（我找到的都不能用）或者资源 的内容进行复制。

      ② 引入 js 文件：

      // js直接引入 -- 未尝试

// CDN引入 -- 未尝试

// layui使用
// 首先在jsPDF.min.js文件中添加exports
layui.define([],function(exports){
    exports('jsPDF',jsPDF);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
	exports("conf", {
	    // 第三方扩展
		extend: {
			// 引入图片转pdf的插件
			jsPDF: "lay/extends/jsPDF.min",
		}
	}
})
      2、使用 npm 进行安装使用：

      待续。。。

      三、普通使用（html2canvas+jsPDF）：

      1、 layui 或者原生js使用：
      // html:

      
    下载为pdf
    内容....

      
// js:
// layui引入：
layui.define(['html2canvas', 'jsPDF'], function (exports) {
	var html2canvas = layui.html2canvas; // 引入html转图片
	var jsPDF = layui.jsPDF; // 引入图片转pdf
	// 初始化
	var init = function() {
		// 点击下载按钮
		document.getElementById("btn").onclick=function(){
				html2canvas(document.getElementById("box"),{
					allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
					backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
					useCORS: true, // 是否尝试使用CORS从服务器加载图像
					dpi: 192, // 导出pdf清晰度
					scale: window.devicePixelRatio * 3, // 用于渲染的比例。默认为浏览器设备像素比率。
				}).then(canvas => {
					// html生成图片的数据
					var imageData = canvas.toDataURL('image/jpeg', 1.0);
					// 原本的html页面的宽高
					const canvasWidth = canvas.width;
					const canvasHeight = canvas.height;
					// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
					var a4Width = 595; // A4 宽度
					var a4Height = (595 / canvasWidth) * canvasHeight; // A4总高度
					// 生成pdf的一页显示html的高度
					let pageHeight = canvasWidth / 595 * 842;
					// 未生成pdf的html页面高度，最初是整体的高度
					let restHeight = canvasHeight;
					// 页面上下偏移的大小
					var position = 0;
					/**
					 * 参数1：方向：l：横向  p：纵向
					 * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
					 * 参数3：格式：默认为a4
					*/
					var pdf = new jsPDF('p', 'pt', 'a4');
					// 当内容未超过pdf一页显示的范围，无需分页
					if (restHeight  0) {
							pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)
							restHeight -= pageHeight;
							position -= 842;
							if(restHeight > 0) {
								// 在PDF文档中添加新页面
								pdf.addPage();
							}
						}
					}
					// 保存为pdf格式的文件
					pdf.save('生成的pdf文件.pdf')
				})
			}
	}
	
	var Class = {
		init: function (options) {
			init();
			return this;
		}
	}
	exports('XXX', Class);
)}
      2、 vue/react 框架进行使用：

      待续。。。

      四、模块分割（html2canvas+jsPDF – 文字会截断，除了让后端做，没找到别的解决办法，感觉后端的插件比前端的更好用…）：

      参考链接：https://blog.csdn.net/qq_32244819/article/details/109678481

      具体代码：
      	// 点击下载按钮
	document.getElementById("btn").onclick=function(){
		outPutPdfFn()
	}
	// 导出方法
	var outPutPdfFn = function() {
		const A4_WIDTH = 592.28; // A4纸的宽
		const A4_HEIGHT = 841.89; // A4纸的高
		console.log('正在导出pdf，请稍候...');
		let target = document.getElementById('box'); // 需要打印的页面的dom
		let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT; // 根据比例换算一页的高度
		// 获取分割的dom，即class类名为splitItem的dom
		let splitItemAll = document.getElementsByClassName('splitItem');
		// 进行分割操作，当分块的内容超出a4纸的高度，则在这个块之前插入一个空白的块，将原有的块下移进行分割
		for (let i = 0; i  页面的高度
		if (nodes[index].offsetTop + nodes[index].offsetHeight  pageHeight) {
			return true;
		}
		return false;
	}
	// 导出pdf
	var getPdf = function(title, dom) {
		html2canvas(document.getElementById(dom),{
			allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
			backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
			useCORS: true, // 是否尝试使用CORS从服务器加载图像
			dpi: 192, // 导出pdf清晰度
			scale: window.devicePixelRatio * 3   // 用于渲染的比例。默认为浏览器设备像素比率。增加清晰度
		}).then(canvas => {
			// html生成图片的数据
			var imageData = canvas.toDataURL('image/jpeg', 1.0);
			// 原本的html页面的宽高
			const canvasWidth = canvas.width;
			const canvasHeight = canvas.height;
			// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
			var a4Width = 592.28; // A4 宽度
			var a4Height = (592.28 / canvasWidth) * canvasHeight; // A4总高度
			// 生成pdf的一页显示html的高度
			let pageHeight = canvasWidth / 592.28 * 841.89;
			// 未生成pdf的html页面高度，最初是整体的高度
			let restHeight = canvasHeight;
			// 页面上下偏移的大小
			var position = 0;
			/**
			 * 参数1：方向：l：横向  p：纵向
			 * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
			 * 参数3：格式：默认为a4
			*/
			var pdf = new jsPDF('p', 'pt', 'a4');
			// 当内容未超过pdf一页显示的范围，无需分页
			if (restHeight  0) {
					pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)
					restHeight -= pageHeight;
					position -= 841.89;
					if(restHeight > 0) {
						// 在PDF文档中添加新页面
						pdf.addPage();
					}
				}
			}
			// 保存为pdf格式的文件
			pdf.save(`${title}.pdf`)
		})
	}

      五、echarts图表模糊的解决办法：

      // 方法一：初始化echarts的时候，添加清晰度配置 devicePixelRatio
echarts.init(chartDom, null, { devicePixelRatio: window.devicePixelRatio * 3 });
// 方法二：使用svg渲染，这个效果更好，就是需要调整grid，不然图表不完整
// echarts.init(chartDom, null, { renderer: "svg" })

相关阅读：

1、高效VPS数据库搭建与管理指南，轻松实现配置与管理一体化

2、日本樱花VPS搭建指南，轻松构建高效稳定的樱花主题服务器！

3、揭秘VPS容量极限，一台服务器能承载多少网站？

4、VPS表格视频应用操作指南，轻松上手，高效应用！

5、VPS远程操作失败原因详解与解决方案探讨

    高速稳定云服务器25元起
    免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    相关阅读

    目录[+]