Vue前端导出页面为PDF文件

熊出没2025-07-11 12:00

文章目录

前言

笔者最近遇到一个需求，要把前端渲染出来的页面完整的导出为PDF格式，最开始的方案是想在服务端导出，使用Freemarker或者Thymeleaf模板引擎，但是页面实在是有点复杂，开发起来比较费劲，最终还是寻找前端导出PDF的方案。其实前端导出反而更好，可以减轻服务器端的压力，导出来的样式也更好看，给各位看下，笔者要导出的页面，内容还是挺多的吧。

一、导出工具类

下面直接展示PDF导出工具类

typescript 复制代码 
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

export default {
	/**
	 * 将HTML元素导出为PDF
	 * @param element 需要导出的DOM元素
	 * @param fileName 导出的文件名
	 */
	async exportElementToPdf(element: HTMLElement, fileName: string = 'document'): Promise<void> {
		if (!element) {
			console.error('导出元素不能为空');
			return;
		}

		try {
			// 处理textarea元素，临时替换为div以确保内容完整显示
			const textareas = Array.from(element.querySelectorAll('textarea'));
			const originalStyles: { [key: string]: string } = {};
			const replacedElements: HTMLElement[] = [];

			// 处理滚动区域
			const scrollElements = element.querySelectorAll('[style*="overflow"],[style*="height"]');
			const originalScrollStyles: { [key: string]: string } = {};

			scrollElements.forEach((el, index) => {
				const computedStyle = window.getComputedStyle(el);
				if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll' ||
					computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
					originalScrollStyles[index] = (el as HTMLElement).style.cssText;
					(el as HTMLElement).style.overflow = 'visible';
					(el as HTMLElement).style.maxHeight = 'none';
					(el as HTMLElement).style.height = 'auto';
				}
			});

			// 替换所有textarea为div，保留内容和样式
			textareas.forEach((textarea, index) => {
				// 保存原始样式
				originalStyles[index] = textarea.style.cssText;

				// 创建替代元素
				const replacementDiv = document.createElement('div');
				replacementDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');
				replacementDiv.style.cssText = textarea.style.cssText;
				replacementDiv.style.height = 'auto'; // 确保高度自适应内容
				replacementDiv.style.minHeight = window.getComputedStyle(textarea).height;
				replacementDiv.style.border = window.getComputedStyle(textarea).border;
				replacementDiv.style.padding = window.getComputedStyle(textarea).padding;
				replacementDiv.style.boxSizing = 'border-box';
				replacementDiv.style.whiteSpace = 'pre-wrap';
				replacementDiv.style.overflowY = 'visible';

				// 替换元素
				textarea.parentNode?.insertBefore(replacementDiv, textarea);
				textarea.style.display = 'none';
				replacedElements.push(replacementDiv);
			});

			// 预加载所有图片的增强方法
			const preloadImages = async () => {
				// 查找所有图片元素
				const images = Array.from(element.querySelectorAll('img'));

				// 记录原始的src属性
				const originalSrcs = images.map(img => img.src);

				// 确保所有图片都完全加载
				await Promise.all(
					images.map((img, index) => {
						return new Promise<void>((resolve) => {
							// 如果图片已经完成加载，直接解析
							if (img.complete && img.naturalHeight !== 0) {
								resolve();
								return;
							}

							// 为每个图片添加加载和错误事件监听器
							const onLoad = () => {
								img.removeEventListener('load', onLoad);
								img.removeEventListener('error', onError);
								resolve();
							};

							const onError = () => {
								console.warn(`无法加载图片: ${img.src}`);
								img.removeEventListener('load', onLoad);
								img.removeEventListener('error', onError);

								// 尝试重新加载图片
								const newImg = new Image();
								newImg.crossOrigin = "Anonymous";
								newImg.onload = () => {
									img.src = originalSrcs[index]; // 恢复原始src
									resolve();
								};
								newImg.onerror = () => {
									img.src = originalSrcs[index]; // 恢复原始src
									resolve(); // 即使失败也继续执行
								};

								// 强制重新加载
								const src = img.src;
								img.src = '';
								setTimeout(() => {
									newImg.src = src;
								}, 100);
							};

							img.addEventListener('load', onLoad);
							img.addEventListener('error', onError);

							// 如果图片没有src或src是数据URL，直接解析
							if (!img.src || img.src.startsWith('data:')) {
								resolve();
							}
						});
					})
				);
			};

			// 预加载所有图片
			await preloadImages();

			// 使用html2canvas将整个元素转为单个canvas
			const canvas = await html2canvas(element, {
				scale: 2, // 提高清晰度
				useCORS: true, // 允许加载跨域图片
				logging: false,
				allowTaint: true, // 允许污染画布
				backgroundColor: '#ffffff', // 设置背景色为白色
				imageTimeout: 15000, // 增加图片加载超时时间到15秒
				onclone: (documentClone) => {
					// 在克隆的文档中查找所有图片
					const clonedImages = documentClone.querySelectorAll('img');

					// 确保所有图片都设置了crossOrigin属性
					clonedImages.forEach(img => {
						img.crossOrigin = "Anonymous";

						// 对于数据URL的图片跳过
						if (img.src && !img.src.startsWith('data:')) {
							// 添加时间戳以避免缓存问题
							if (img.src.indexOf('?') === -1) {
								img.src = `${img.src}?t=${new Date().getTime()}`;
							} else {
								img.src = `${img.src}&t=${new Date().getTime()}`;
							}
						}
					});

					return documentClone;
				}
			});

			// 恢复原始DOM，移除临时添加的元素
			textareas.forEach((textarea, index) => {
				textarea.style.cssText = originalStyles[index];
				textarea.style.display = '';
				if (replacedElements[index] && replacedElements[index].parentNode) {
					replacedElements[index].parentNode.removeChild(replacedElements[index]);
				}
			});

			// 恢复滚动区域的样式
			scrollElements.forEach((el, index) => {
				if (originalScrollStyles[index]) {
					(el as HTMLElement).style.cssText = originalScrollStyles[index];
				}
			});

			// 创建PDF（使用适合内容的尺寸）
			// 如果内容宽高比接近A4，使用A4；否则使用自定义尺寸
			const imgWidth = 210; // A4宽度（mm）
			const imgHeight = (canvas.height * imgWidth) / canvas.width;

			// 使用一页完整显示内容，不强制分页
			const pdf = new jsPDF({
				orientation: imgHeight > 297 ? 'p' : 'p', // 如果内容高度超过A4高度，使用纵向
				unit: 'mm',
				format: imgHeight > 297 ? [imgWidth, imgHeight] : 'a4' // 如果内容高度超过A4高度，使用自定义尺寸
			});

			// 添加图像到PDF，确保填满页面但保持比例
			pdf.addImage(
				canvas.toDataURL('image/jpeg', 1.0), // 使用高质量
				'JPEG',
				0,
				0,
				imgWidth,
				imgHeight
			);

			// 保存PDF
			pdf.save(`${fileName}.pdf`);
		} catch (error) {
			console.error('导出PDF时发生错误:', error);
		}
	}
};

这个 工具类考虑了导出的html页面中的图片和text滚动文本框，使得导出来的PDF文件能够完整展示原HTML页面内容，基本能做到95%以上的还原吧，导出的格式是A4纸张大小，方便打印出来。

二、单页面详情导出

比如说我现在有个页面叫detail.vue，页面模板部分如下

xml 复制代码 
<template >
	<div
		class="reports-detail-page"
		v-if="reportDetail"
		ref="weekReportRef"

	>
		<img
			src="/icon/read.png"
			class="read-mark"
			:class="{
				'read-mark-mobile': mainStates.isMobile,
			}"
			alt="已审批"
			v-if="reportDetail.weekReports.status === 1"
		/>
		<el-button  class="export-pdf" type="primary" v-if="!isImporting" size="small" @click="downloadPdf">导出PDF</el-button>
		<week-report
			:is-plan="false"
			v-if="reportDetail.lastWeekReports"
			:week-report="reportDetail.lastWeekReports"
			:self-comments="reportDetail.weekReportsSelfCommentsList"
		/>
		<week-report
			:is-plan="true"
			:week-report="reportDetail.weekReports"
			:self-comments="reportDetail.weekReportsSelfCommentsList"
		/>
		<comment-area :is-importing="isImporting" :report-detail="reportDetail" />
	</div>
</template>

这里的关键属性是ref="weekReportRef"，其声明定义如下：

typescript 复制代码 
const weekReportRef = ref<HTMLElement | null>(null);

在Vue 3中，ref是一个非常重要的响应式API，它有两种主要用途：

  1. 在脚本中创建响应式变量 ：通过ref()函数创建一个响应式引用
  2. 在模板中引用DOM元素或组件实例 ：通过在模板元素上添加ref属性

这里主要是利用了第二点，代表了当前组件的渲染实例，导出PDF按钮对应的方法如下：

typescript 复制代码 
// 下载PDF
const downloadPdf = async () => {
	if (!weekReportRef.value) return;

	isImporting.value = true;

	// 创建文件名，例如：张三_2025年第28周_总结
	const fileName = `${reportDetail.value?.weekReports.userName}${weekDesc.value}周报`;

	ElLoading.service({
		lock: true,
		text: '正在导出PDF,请稍后...',
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0.7)',
	});
	try {
		// 使用nextTick等待DOM更新完成
		await nextTick();
		await PdfExportUtils.exportElementToPdf(weekReportRef.value, fileName).then(()=>{
			isImporting.value = false;
			ElLoading.service().close();
		});
	} catch (error) {
		console.error('导出PDF失败', error);
	}
};

通过以上代码，可以看到在调用导出PDF时，传入了当前的组件的实例，其中isImporting这个属性，是笔者为了限制某些按钮什么的控件不要在导出后的PDF文件中显示而添加的临时属性。

三、列表页批量压缩导出

上面说的是单页面导出PDF，那如果有个列表页，需要批量选择然后导出怎么办？导出过程中，又没办法一个个点进去等待数据渲染。前辈大佬早就想到了这个场景，我们可以利用html中的标签iframe，在批量选择导出时，为每一个列表数据临时创建一个渲染后的详情页面数据，即Dom中的Dom，然后对嵌套页面导出压缩，当然我们用户自己是感知不到的。比如下面的列表：

以下代码是针对勾选数据的定义和响应式绑定

typescript 复制代码 
const selectedRows = ref<WeekReportsDetail[]>([]);
// 处理表格选择变化
const handleSelectionChange = (selection: WeekReportsDetail[]) => {
	selectedRows.value = selection;
};

批量导出压缩PDF文件的代码如下，比较复杂，仅供参考：

typescript 复制代码 
// 导出选中项到PDF并压缩
const exportSelectedToPdf = async () => {
	if (selectedRows.value.length === 0) {
		ElNotification({
			title: '提示',
			message: '请先选择要导出的周报',
			type: 'warning',
		});
		return;
	}

	// 显示加载中提示
	const loading = ElLoading.service({
		lock: true,
		text: `正在准备导出...`,
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	try {
		// 创建ZIP实例
		const zip = new JSZip();
		const allPdfResults: { fileName: string, pdfBlob: Blob }[] = [];

		// 定义批处理大小和函数
		const batchSize = 5; // 每批处理的数量，可以根据实际情况调整

		// 批量处理函数
		const processBatch = async (batchReports: WeekReportsDetail[]) => {
			const batchPromises = batchReports.map((report) => {
				return new Promise<{fileName: string, pdfBlob: Blob}>(async (resolve, reject) => {
					try {
						const overall = selectedRows.value.indexOf(report) + 1;
						loading.setText(`正在导出第 ${overall}/${selectedRows.value.length} 个周报...`);

						const iframe = document.createElement('iframe');
						iframe.style.position = 'fixed';
						iframe.style.left = '0';
						iframe.style.top = '0';
						iframe.style.width = '1024px';
						iframe.style.height = '768px';
						iframe.style.border = 'none';
						iframe.style.zIndex = '-1';
						iframe.style.opacity = '0.01'; // 几乎不可见但会渲染

						// 加载详情页面的URL
						iframe.src = `${window.location.origin}/center/detail/${report.id}?corpId=${mainStates.corpId}&isImporting=true`;
						document.body.appendChild(iframe);

						// 使用Promise包装iframe加载和处理
						let retryCount = 0;
						const maxRetries = 2;

						while (retryCount <= maxRetries) {
							try {
								await new Promise<void>((resolveIframe, rejectIframe) => {
									// 设置超时
									const timeoutId = setTimeout(() => {
										rejectIframe(new Error('加载超时'));
									}, 15000); // 15秒超时

									iframe.onload = async () => {
										clearTimeout(timeoutId);

										try {
											// 给页面充分的时间加载数据和渲染
											await new Promise(r => setTimeout(r, 3000));
											const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
											if (!iframeDocument) {
												resolveIframe();
												return;
											}
											const reportElement = iframeDocument.querySelector('.reports-detail-page');
											if (!reportElement) {
												resolveIframe();
												return;
											}

											// 处理iframe中的所有textarea和滚动区域
											const iframeTextareas = Array.from(reportElement.querySelectorAll('textarea'));
											const replacedElements: HTMLElement[] = [];

											// 替换所有textarea为div
											iframeTextareas.forEach((textarea) => {
												const replacementDiv = document.createElement('div');
												replacementDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');
												replacementDiv.style.cssText = textarea.style.cssText;
												replacementDiv.style.height = 'auto';
												replacementDiv.style.minHeight = window.getComputedStyle(textarea).height;
												replacementDiv.style.boxSizing = 'border-box';
												replacementDiv.style.whiteSpace = 'pre-wrap';
												replacementDiv.style.overflowY = 'visible';

												textarea.parentNode?.insertBefore(replacementDiv, textarea);
												textarea.style.display = 'none';
												replacedElements.push(replacementDiv);
											});

											// 处理滚动区域
											const scrollElements = reportElement.querySelectorAll('[style*="overflow"],[style*="height"]');
											scrollElements.forEach((el) => {
												const computedStyle = window.getComputedStyle(el);
												if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll' ||
													computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
													(el as HTMLElement).style.overflow = 'visible';
													(el as HTMLElement).style.maxHeight = 'none';
													(el as HTMLElement).style.height = 'auto';
												}
											});

											// 预加载所有图片
											const images = Array.from(reportElement.querySelectorAll('img'));
											await Promise.all(
												images.map(img => {
													return new Promise<void>((resolveImg) => {
														if (img.complete && img.naturalHeight !== 0) {
															resolveImg();
															return;
														}

														const onLoad = () => {
															img.removeEventListener('load', onLoad);
															img.removeEventListener('error', onError);
															resolveImg();
														};

														const onError = () => {
															console.warn(`无法加载图片: ${img.src}`);
															img.removeEventListener('load', onLoad);
															img.removeEventListener('error', onError);
															resolveImg();
														};

														img.addEventListener('load', onLoad);
														img.addEventListener('error', onError);

														// 如果图片没有src或src是数据URL，直接解析
														if (!img.src || img.src.startsWith('data:')) {
															resolveImg();
														} else {
															// 添加时间戳以避免缓存问题
															const currentSrc = img.src;
															img.src = '';
															setTimeout(() => {
																if (currentSrc.indexOf('?') === -1) {
																	img.src = `${currentSrc}?t=${new Date().getTime()}`;
																} else {
																	img.src = `${currentSrc}&t=${new Date().getTime()}`;
																}
															}, 50);
														}
													});
												})
											);

											// 等待额外时间确保渲染完成
											await new Promise(r => setTimeout(r, 1000));

											// 创建周报文件名
											const weekDesc = DateTimeUtils.getWeekDescByYearAndWeek({
												weekIndex: report.weekIndex,
												yearIndex: report.year,
											});
											const fileName = `${report.userName}_${weekDesc}周报.pdf`;

											// 使用html2canvas转换为canvas
											const canvas = await html2canvas(reportElement as HTMLElement, {
												scale: 2,
												useCORS: true,
												logging: false,
												allowTaint: true,
												backgroundColor: '#ffffff',
												imageTimeout: 15000, // 增加超时时间
											});

											// 从canvas创建PDF
											const imgWidth = 210; // A4宽度（mm）
											const imgHeight = (canvas.height * imgWidth) / canvas.width;
											const pdf = new jsPDF({
												orientation: imgHeight > 297 ? 'p' : 'p',
												unit: 'mm',
												format: imgHeight > 297 ? [imgWidth, imgHeight] : 'a4',
											});

											pdf.addImage(
												canvas.toDataURL('image/jpeg', 1.0),
												'JPEG',
												0,
												0,
												imgWidth,
												imgHeight,
											);

											// 获取PDF的Blob
											const pdfBlob = pdf.output('blob');

											// 恢复iframe中的DOM
											iframeTextareas.forEach((textarea, index) => {
												textarea.style.display = '';
												if (replacedElements[index] && replacedElements[index].parentNode) {
													replacedElements[index].parentNode.removeChild(replacedElements[index]);
												}
											});

											// 解析PDF处理结果
											resolveIframe();

											// 直接添加到ZIP
											zip.file(fileName, pdfBlob);
											resolve({ fileName, pdfBlob });

										} catch (error) {
											console.error('处理PDF时出错:', error);
											rejectIframe(error);
										}
									};

									iframe.onerror = () => {
										clearTimeout(timeoutId);
										rejectIframe(new Error('iframe加载失败'));
									};
								});

								// 如果成功处理了，跳出重试循环
								break;

							} catch (error) {
								retryCount++;
								console.warn(`处理PDF失败，正在重试(${retryCount}/${maxRetries})...`, error);

								// 如果已经达到最大重试次数，则放弃这个报告
								if (retryCount > maxRetries) {
									console.error(`无法处理周报 ${report.id}，已达到最大重试次数`);
									// 创建一个空白PDF表示失败
									const weekDesc = DateTimeUtils.getWeekDescByYearAndWeek({
										weekIndex: report.weekIndex,
										yearIndex: report.year,
									});
									const fileName = `${report.userName}_${weekDesc}周报(处理失败).pdf`;

									// 创建一个简单的错误PDF
									const pdf = new jsPDF();
									pdf.setFontSize(16);
									pdf.text('处理此周报时出错', 20, 20);
									pdf.setFontSize(12);
									pdf.text(`用户: ${report.userName}`, 20, 40);
									pdf.text(`周报ID: ${report.id}`, 20, 50);
									pdf.text(`时间: ${weekDesc}`, 20, 60);
									pdf.text(`错误信息: ${error || '未知错误'}`, 20, 70);

									const errorPdfBlob = pdf.output('blob');
									zip.file(fileName, errorPdfBlob);
									resolve({ fileName, pdfBlob: errorPdfBlob });
									break;
								}

								// 等待一段时间再重试
								await new Promise(r => setTimeout(r, 2000));
							}
						}

						// 移除iframe
						if (document.body.contains(iframe)) {
							document.body.removeChild(iframe);
						}

					} catch (error) {
						console.error('PDF生成失败:', error);
						reject(error);
					}
				});
			});

			// 处理当前批次
			return await Promise.allSettled(batchPromises);
		};

		// 将报告分成多个批次
		const reportBatches: WeekReportsDetail[][] = [];
		for (let i = 0; i < selectedRows.value.length; i += batchSize) {
			reportBatches.push(selectedRows.value.slice(i, i + batchSize));
		}

		// 逐批处理
		for (let i = 0; i < reportBatches.length; i++) {
			loading.setText(`正在处理第 ${i+1}/${reportBatches.length} 批周报...`);
			const batchResults = await processBatch(reportBatches[i]);

			// 将结果添加到总结果中
			batchResults.forEach(result => {
				if (result.status === 'fulfilled') {
					allPdfResults.push(result.value);
				}
			});

			// 释放一些内存
			await new Promise(r => setTimeout(r, 500));
		}

		// 生成ZIP文件
		loading.setText('正在生成ZIP文件...');

		// 生成并下载ZIP文件
		const zipBlob = await zip.generateAsync({type: 'blob'});
		const zipUrl = URL.createObjectURL(zipBlob);
		const link = document.createElement('a');
		link.href = zipUrl;
		link.download = `周报汇总_${new Date().getTime()}.zip`;
		link.click();
		URL.revokeObjectURL(zipUrl);

		ElNotification({
			title: '导出成功',
			message: `已将${allPdfResults.length}个周报导出为ZIP压缩文件`,
			type: 'success',
		});
	} catch (error) {
		console.error('导出PDF时发生错误:', error);
		ElNotification({
			title: '导出失败',
			message: '导出PDF时发生错误，请稍后再试',
			type: 'error',
		});
	} finally {
		loading.close();
	}
};

执行流程与关键步骤

  1. 前置校验与初始化
  • 选中项校验：首先检查 selectedRows（选中的周报数组）是否为空，若为空则通过 ElNotification 显示警告提示（"请先选择要导出的周报"），直接终止流程。
  • 加载提示初始化：通过 ElLoading.service 创建全屏加载提示，显示 "正在准备导出..."，锁定页面交互以避免重复操作。
  1. 批量处理机制
    为避免一次性处理过多数据导致浏览器性能问题，采用分批处理策略：
  • 批处理配置：定义 batchSize = 5（每批处理 5 个周报，可按需调整），将选中的周报数组拆分为多个批次（reportBatches）。
  • 逐批处理：通过循环逐个处理每个批次，每批处理完成后等待 500ms 释放内存，降低浏览器资源占用。
  1. 单批周报处理（核心逻辑）
    每批周报通过 processBatch 函数处理，单个周报的转换流程如下：
  • 创建隐藏 iframe：动态生成一个不可见的 iframe（定位在页面外，透明度 0.01），用于加载周报详情页（/center/detail/${report.id}）。iframe 的作用是隔离详情页环境，避免直接操作当前页面 DOM 导致冲突。
  • iframe 加载与重试机制：
    • 为 iframe 设置 15 秒超时时间，若加载失败则重试（最多重试 2 次），避免因网络或资源加载问题导致单个周报处理失败。
    • 加载完成后等待 3 秒，确保详情页数据和样式完全渲染。
  • DOM 预处理（确保 PDF 内容完整）：
    • 替换 textarea：将详情页中的 textarea 替换为 div（保留原样式），因为 textarea 的滚动特性可能导致内容截断，替换后可完整显示所有文本。
    • 处理滚动区域：将带有 overflow: auto/scroll 或固定高度的元素改为 overflow: visible 且 maxHeight: none，确保内容不被容器截断。
  • 图片预加载：遍历详情页中的所有图片，等待图片加载完成（或超时 / 错误）后再继续，避免 PDF 中出现图片缺失。通过添加时间戳（?t=${time}）避免缓存影响。
  • 转换为 PDF：
    • 用 html2canvas 将预处理后的详情页元素（.reports-detail-page）转换为 canvas（scale: 2 提高清晰度）。
    • 用 jsPDF 将 canvas 转为 PDF，设置 A4 尺寸（或自适应内容高度），输出为 Blob 格式。
      异常处理：若多次重试后仍失败，生成一个 "错误 PDF"（包含失败原因、周报 ID 等信息），避免单个失败阻断整个批次。
  1. 压缩与下载
  • ZIP 打包：所有 PDF 处理完成后，通过 JSZip 将所有 PDF Blob 打包为一个 ZIP 文件，文件名格式为 "周报汇总_时间戳.zip"。
  • 触发下载：将 ZIP 文件转换为 Blob URL，通过动态创建 标签触发浏览器下载，下载完成后释放 URL 资源。
  1. 结果反馈与资源清理
  • 成功反馈：若全部处理完成，通过 ElNotification 显示成功提示（"已将 X 个周报导出为 ZIP 压缩文件"）。
  • 异常反馈：若过程中出现未捕获的错误，显示错误提示（"导出失败，请稍后再试"）。
  • 资源清理：无论成功或失败，最终通过 loading.close() 关闭加载提示，释放页面锁定。

核心步骤就是iframe，动态生成一个不可见的 iframe（定位在页面外，透明度 0.01），用于加载周报详情页（/center/detail/${report.id}），另外为什么采用批处理，不一次并发执行呢？因为一次执行过多，渲染太多子页面，超出浏览器承受范围会报错。

四、总结

综上，前端导出 PDF 方案通过 html2canvas 与 jsPDF 组合，结合 DOM 预处理解决了复杂页面的完整还原问题。单页导出利用 Vue 的 ref 获取 DOM 元素直接转换，批量导出则借助 iframe 隔离渲染环境并配合 JSZip 压缩，既减轻了服务端压力，又保证了导出效果。实际应用中可根据页面复杂度调整预处理逻辑与批处理参数，平衡导出效率与准确性。

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南：从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect：解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目，某个页面长时间无操作，返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04深度神经网络训练过程与常见概念05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Java类变量（静态变量）08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径