下面记录一段浏览器控制台运行的代码,将网页元素转变成pdf文档:
// 1. 加载必要的库
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
async function init() {
document.getElementById('viewer').style = '';
// 检查是否已加载html2canvas
if (typeof html2canvas === 'undefined') {
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js');
}
// 检查是否已加载jsPDF
if (typeof window.jspdf === 'undefined') {
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
}
// 2. 选择要导出的DOM元素 - 使用.page选择器
const elements = Array.from(document.querySelectorAll('.page'));
if (elements.length === 0) {
console.error('没有找到.page类的元素,请检查页面结构');
return;
}
// 3. 创建PDF文档
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm'
});
// 4. 逐个处理DOM元素
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
try {
// 将DOM元素转换为canvas
const canvas = await html2canvas(element, {
scale: 1, // 提高分辨率
logging: true,
allowTaint: true,
scrollX: 0,
scrollY: 0,
// 添加更多配置以确保.page元素正确渲染
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
});
// 将canvas转换为图像数据
const imgData = canvas.toDataURL('image/jpeg', 1.0);
// 计算PDF页面尺寸
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
// 如果不是第一页,添加新页
if (i > 0) {
pdf.addPage();
}
// 添加图像到PDF
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
console.log(`已处理第 ${i + 1}/${elements.length} 个.page元素`);
} catch (error) {
console.error(`处理第 ${i + 1} 个.page元素时出错:`, error);
}
}
// 5. 保存PDF文件
pdf.save('pages_export.pdf');
console.log('PDF导出完成,包含', elements.length, '个页面');
}
// 执行初始化
init().catch(console.error);
页面: 1 2
hi