前端解决方案：实现网页截图并导出PDF功能

在前端开发中，我们经常会遇到需要将网页内容导出为PDF的需求。本文将以一个准考证预览和导出的例子，带你一步步实现这个功能。我们会处理包括跨域图片、Canvas绘图、PDF生成等多个技术要点。

请添加图片描述

一、基础环境搭建

首先，我们需要搭建一个基础的HTML结构，并引入必要的依赖。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>网页截图导出PDF示例</title></head><body><!-- 引入依赖 --><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script></body>
</html>

这里我们引入了两个重要的库：

html2canvas：用于将网页内容转换为canvas图像
jsPDF：用于生成PDF文件

二、创建页面内容

接下来，我们创建一个简单的准考证预览界面：

<div id="ticket"><h1>准考证</h1><table border="1"><tr><th>考生姓名</th><th>张三猫</th></tr><tr><td>照片</td><td><img src="https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg" alt="" /></td></tr></table>
</div><button onclick="fetchImage()">检测图片是否支持跨域</button>
<button onclick="newImage()">图片转base64</button>
<button onclick="exportToPDF()">导出PDF准考证</button>

三、处理跨域图片问题

在处理外部图片时，我们首先需要解决跨域问题。

运维：需设置图片允许跨域访问，以阿里云 OSS 跨域规则配置为例。
在这里插入图片描述

前端：先检测图片是否支持跨域访问，支持图片跨域访问的情况下，再把图片转base64。

1. 检测图片跨域支持

function fetchImage() {fetch('https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg').then((res) => {console.log('支持跨域', res.type)}).catch((err) => {console.log('不支持跨域', err)})
}

2. 图片转Base64

function newImage() {// 创建图片const img = new Image()img.src = 'https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg'// 设置跨域img.crossOrigin = 'anonymous'// 监听图片加载img.onload = () => {// 创建canvasconst canvas = document.createElement('canvas')// 设置canvas的宽高canvas.width = img.widthcanvas.height = img.height// 获取canvas的上下文const ctx = canvas.getContext('2d')// 绘制图片ctx.drawImage(img, 0, 0)// 转换为base64const base64 = canvas.toDataURL('image/jpeg')console.log('base64转换成功', base64)}
}

四、图片处理工具函数

为了确保所有图片都能正确加载和处理，我们需要两个重要的工具函数：

1. 转换图片为Base64

async function convertImageToBase64(url) {return new Promise((resolve, reject) => {const img = new Image()img.src = urlimg.crossOrigin = 'anonymous'img.onload = () => {const canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0)resolve(canvas.toDataURL('image/jpeg'))}img.onerror = () => {console.log('图片加载失败')reject(new Error('图片加载失败'))}})
}

2. 等待所有图片加载完成

function waitForImagesLoaded() {return Promise.all(Array.from(document.images).filter((img) => !img.complete).map((img) =>new Promise((resolve) => {img.onload = img.onerror = resolve})))
}

五、实现PDF导出功能

最后，我们来实现核心的PDF导出功能：

async function exportToPDF() {try {// 1. 等待所有图片加载await waitForImagesLoaded()// 2. 处理页面中的所有图片const images = document.querySelectorAll('img')for (const img of images) {try {const base64 = await convertImageToBase64(img.src)img.src = base64} catch (e) {console.error('图片转换失败', e)}}// 3. 将页面转换为canvasconst ticket = document.getElementById('ticket')const canvas = await html2canvas(ticket, {scale: 2, // 提高清晰度useCORS: true, // 允许跨域})const imgData = canvas.toDataURL('image/png')// 4. 创建PDF文档const pdf = new jspdf.jsPDF({orientation: 'portrait', // 竖向unit: 'mm', // 单位：毫米format: 'a4', // A4纸张})// 5. 计算适合的图片尺寸const pageWidth = pdf.internal.pageSize.getWidth()const pageHeight = pdf.internal.pageSize.getHeight()const imgWidth = pageWidth - 20 // 左右各留10mm边距const imgHeight = (canvas.height * imgWidth) / canvas.width// 6. 将图片添加到PDF中pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight)// 7. 下载PDF文件pdf.save('张三的准考证.pdf')} catch (error) {console.error('PDF导出失败', error)}
}

六、完整代码

将上述所有代码组合在一起，就构成了一个完整的网页截图并导出PDF的功能。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>网页截图导出PDF示例</title></head><body><!-- 引入依赖 --><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script><div id="ticket"><h1>准考证</h1><table border="1"><tr><th>考生姓名</th><th>张三猫</th></tr><tr><td>照片</td><td><img src="https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg" alt="" /></td></tr></table></div><button onclick="fetchImage()">检测图片是否支持跨域</button><button onclick="newImage()">图片转base64</button><button onclick="exportToPDF()">导出PDF准考证</button><script>function fetchImage() {fetch('https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg').then((res) => {console.log('支持跨域', res.type)}).catch((err) => {console.log('不支持跨域', err)})}function newImage() {// 创建图片const img = new Image()img.src = 'https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg'// 设置跨域img.crossOrigin = 'anonymous'// 监听图片加载img.onload = () => {// 创建canvasconst canvas = document.createElement('canvas')// 设置canvas的宽高canvas.width = img.widthcanvas.height = img.height// 获取canvas的上下文const ctx = canvas.getContext('2d')// 绘制图片ctx.drawImage(img, 0, 0)// 转换为base64const base64 = canvas.toDataURL('image/jpeg')console.log('base64转换成功', base64)}}// 先获取图片的base64编码async function convertImageToBase64(url) {return new Promise((resolve, reject) => {const img = new Image()img.src = 'https://xueyingyu.oss-cn-guangzhou.aliyuncs.com/cat.jpg'img.crossOrigin = 'anonymous'img.onload = () => {const canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')console.log(11111, img)ctx.drawImage(img, 0, 0)resolve(canvas.toDataURL('image/jpeg'))}img.onerror = () => {console.log(222222, '图片加载失败')}})}// 等待图片加载function waitForImagesLoaded() {return Promise.all(Array.from(document.images).filter((img) => !img.complete).map((img) =>new Promise((resolve) => {img.onload = img.onerror = resolve}),),)}// 修改导出函数async function exportToPDF() {// 先等待图片加载await waitForImagesLoaded()// 再处理图片const images = document.querySelectorAll('img')for (const img of images) {try {const base64 = await convertImageToBase64(img.src)img.src = base64} catch (e) {console.error('图片转换失败', e)}}// 截图到canvas中const ticket = document.getElementById('ticket')const canvas = await html2canvas(ticket, {scale: 2, // 缩放比例useCORS: true, // 允许跨域})const imgData = canvas.toDataURL('image/png')// 创建pdfconst pdf = new jspdf.jsPDF({orientation: 'portrait', // 方向: 竖屏unit: 'mm', // 单位: 毫米format: 'a4', // 纸张大小: A4})// 获取pdf的宽高const pageWidth = pdf.internal.pageSize.getWidth()const pageHeight = pdf.internal.pageSize.getHeight()// 计算图片缩放比例以适应页面宽度const imgWidth = pageWidth - 20 // 留边距const imgHeight = (canvas.height * imgWidth) / canvas.width// 添加图片到pdfpdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight)// 下载pdfpdf.save('张三的准考证.pdf')}</script></body>
</html>