网站标准规范建设/广州seo推广运营专员

网站标准规范建设,广州seo推广运营专员,网站建设哪家公司最好,网站开发岗位群前端解决方案:实现网页截图并导出PDF功能 在前端开发中,我们经常会遇到需要将网页内容导出为PDF的需求。本文将以一个准考证预览和导出的例子,带你一步步实现这个功能。我们会处理包括跨域图片、Canvas绘图、PDF生成等多个技术要点。 一、基…

前端解决方案:实现网页截图并导出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>

七、技术要点总结

  1. 跨域处理

    • 使用 crossOrigin = 'anonymous' 处理跨域图片
    • 将图片转换为Base64格式避免跨域问题
  2. 异步处理

    • 使用 Promise 处理图片加载
    • 使用 async/await 简化异步代码
  3. Canvas操作

    • 创建Canvas元素
    • 设置Canvas尺寸
    • 在Canvas中绘制图片
  4. PDF生成

    • 设置PDF属性(方向、单位、纸张大小)
    • 计算图片在PDF中的合适尺寸
    • 添加图片到PDF并下载

八、注意事项

  1. 确保服务器端图片资源允许跨域访问(设置正确的CORS头)
  2. 考虑图片加载失败的情况,添加适当的错误处理
  3. 根据实际需求调整PDF的参数(如边距、缩放比例等)
  4. 在生产环境中建议使用可靠的CDN或本地托管依赖库

九、扩展优化

  1. 添加加载提示
  2. 支持自定义PDF文件名
  3. 支持自定义PDF页面大小和方向
  4. 添加水印或其他安全标记
  5. 优化图片质量和文件大小

希望这篇教程能帮助你理解和实现网页截图并导出PDF的功能。如果你有任何问题,欢迎在评论区讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/73446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】表操作

表操作 一、创建表 1、语句2、语句介绍3、注意事项4、介绍5、示例 二、查看表结构 1、语句2、介绍3、返回的信息4、示例 三、添加字段 1、语句2、语句介绍3、示例 四、修改 1、语句2、语句介绍3、示例 五、删除 1、语句2、示例 六、修改表名 1、语句2、语句介绍3、示例 七、删…

响应“一机两用”政策 ,实现政务外网安全

在数字化办公的浪潮下&#xff0c;企业与政务机构面临着既要保障数据安全&#xff0c;又要高效访问互联网的双重需求。“一机两用”成为解决这一难题的关键。 政策驱动&#xff0c;需求迫切 随着《网络安全法》《数据安全法》等法律法规的相继出台&#xff0c;网络安全防护的要…

文生图语义识别插件使用(controlnet)

1. 插件下载(github) https://github.com/Mikubill/sd-webui-controlnet https://github.com/lllyasviel/ControlNet2. 模型下载(hugging face) https://github.com/Mikubill/sd-webui-controlnet/wiki/Model-download https://huggingface.co/bdsqlsz/qinglong_controlnet-l…

学者观察 | web3.0产业发展与技术融合——北京大学研究员肖臻

导语 肖臻老师认为在未来很长一段时间内&#xff0c;Web 3.0将和现在的Web 2.0共存。Web 3.0和人工智能&#xff08;AI&#xff09;的融合发展前景非常广阔&#xff0c;Web 3.0致力于打造去中心化的互联网生态系统&#xff0c;赋予用户更大的数据所有权和控制权&#xff0c;而…

【模型压缩+推理加速】知识蒸馏综述解读

知识蒸馏综述解读 论文&#xff1a; https://arxiv.org/abs/2006.05525 最近Deepseek R1的技术报告中&#xff0c;训练部分提到使用了知识蒸馏&#xff0c;就像系统性的看看蒸馏算法的原理。看了很多的博客&#xff0c;很多都没有详细把知识蒸馏系统的讲清楚。我们还是读一下…

vivo 湖仓架构的性能提升之旅

作者&#xff1a;郭小龙 vivo互联网 大数据高级研发工程师 导读&#xff1a;本文整理自 vivo互联网 大数据高级研发工程师 郭小龙 在 StarRocks 年度峰会上的分享&#xff0c;聚焦 vivo 大数据多维分析面临的挑战、StarRocks 落地方案及应用收益。 在 即席分析 场景&#xff0c…

2025年如何避免使用验证码求解器时被IP封禁

引言 2025年&#xff0c;验证码求解器已成为自动化网络抓取和其他在线流程的关键工具。然而&#xff0c;自动化用户面临的一个常见挑战是IP封禁。当网站检测到自动化活动时&#xff0c;通常会阻止发出请求的IP地址&#xff0c;导致验证码挑战无法解决。本文将探讨使用验证码求…

JVM详解(包括JVM内存模型与GC垃圾回收)

&#x1f4d6;前言&#xff1a; 学会使用Java对于一个程序员是远远不够的。Java语法的掌握只是一部分&#xff0c;另一部分就是需要掌握Java内部的工作原理&#xff0c;从编译到运行&#xff0c;到底是谁在帮我们完成工作的&#xff1f; 接下来着重对Java虚拟机&#xff0c;也就…

【无标题】大亚湾文化体育场多美啊。

请推荐一些常用并且免费的&#xff0c;可直接在线运行【Python】代码的平台并列出对应网址 好的&#xff0c;用户想让我推荐一些常用且免费的、可以直接在线运行Python代码的平台&#xff0c;并且需要列出对应的网址。我需要先回想一下自己知道的在线Python运行环境&#xff0…

权限提升—Windows权限提升土豆家族溢出漏洞通杀全系

前言 OK&#xff0c;Java安全更新不下去了&#xff0c;实在是太难啦啊&#xff0c;想起来提权这一块没怎么更新过&#xff0c;接下来都主要是更新提权这一块的文章了&#xff0c;Java安全的话以后有耐心再搞了。 手动提权 今天主要是讲这个手动的提权&#xff0c;手动提权相…

python --face_recognition(人脸识别,检测,特征提取,绘制鼻子,眼睛,嘴巴,眉毛)/活体检测

dlib 安装方法 之前博文 https://blog.csdn.net/weixin_44634704/article/details/141332644 环境: python3.8 opencv-python4.11.0.86 face_recognition1.3.0 dlib19.24.6人脸检测 import cv2 import face_recognition# 读取人脸图片 img cv2.imread(r"C:\Users\123\…

禾赛盈利了,但激光雷达没有胜利

还远没有到激光雷达党欢呼的时候。 3月&#xff0c;随着禾赛科技公布2024年报&#xff0c;全世界第一家也是唯一一家实现全年盈利的激光雷达上市公司诞生&#xff0c;为了这个盈利目标&#xff0c;禾赛科技奋斗了十年。 但极大的出货量和不高的盈利水平&#xff0c;让禾赛科技…

关于金碟K3,禁用和启用需要流程审批后执行

真是难受,是设计师蠢呢自己问题比较多呢,现在都还没有弄好 点击禁用和启用,通过流程来执行 到底是蠢呢还是设计问题,搞了半日没有效果,搞那么复杂! 而且有样板都没有草鞋成功 BOS设计,表单属性,操作列表: 1、启用禁用流程

导入 Excel 规则批量修改或删除 PDF 文档内容

需要对 PDF 文档内容进行修改的时候&#xff0c;通常我们会需要借助一些专业的工具来帮我们完成。那我们如果需要修改的 PDF 文档较多的时候&#xff0c;有什么方法可以帮我们实现批量操作呢&#xff1f;今天这篇文章就给大家介绍一下当我们需要批量修改多个 PDF 文档的时候&am…

msyql--基本操作之运维篇

检查 root 用户的权限 查看该用户针对这个数据库的权限 -- 如果在终端连接mysql时需要 mysql -u root -p -- 查看用户权限 SELECT user, host FROM mysql.user WHERE user root;可以看的出来root有他的访问权限&#xff0c;如过没有localhost或者% 说明没有访问权限 添加…

云计算:探索现代科技的未来之云

文章目录 云计算基本概念云计算是什么注意 云计算的价值云计算的部署模式云计算的服务模式主流的云计算技术AWS简介AWS建立了广阔的合作伙伴生态 VMware简介VMware服务介绍 华为云简介华为云Stack模式 云计算基本概念 云计算是什么 云计算是一种模型&#xff0c;它可以实现随时…

STM32蜂鸣器播放音乐

STM32蜂鸣器播放音乐 STM32蜂鸣器播放音乐 Do, Re, Mi, Fa, 1. 功能概述 本系统基于STM32F7系列微控制器&#xff0c;实现了以下功能&#xff1a; 通过7个按键控制蜂鸣器发声&#xff0c;按键对应不同的音符。每个按键对应一个音符&#xff08;Do, Re, Mi, Fa, Sol, La, Si&a…

网络地址转换技术(2)

NAT的配置方法&#xff1a; &#xff08;一&#xff09;静态NAT的配置方法 进入接口视图配置NAT转换规则 Nat static global 公网地址 inside 私网地址 内网终端PC2&#xff08;192.168.20.2/24&#xff09;与公网路由器AR1的G0/0/1&#xff08;11.22.33.1/24&#xff09;做…

【Linux网络-多路转接select】

代码&#xff1a;https://gitee.com/nanyi-c/linux/tree/master/day50 一、I/O多路转接之select 1.初始select 系统提供select函数来实现多路复用输入/输出模型 select系统调用是用来让我们的程序监视多个文件描述符的状态变化的程序会停在select这里等待&#xff0c;直到被…

2025 年中国家电零售与创新趋势解析:以旧换新国补激活需求,AI 技术渗透至研发、供应链、营销

一、产业环境&#xff1a;政策驱动与技术变革下的挑战与机遇 在全球经济波动与国内消费转型的双重背景下&#xff0c;中国家电产业正经历前所未有的变革。2024 年&#xff0c;家电行业面临的 “三座大山”—— 短期消费信心低迷、中期房地产降温、长期人口下行压力 —— 持续施…