当前位置: 首页 > news >正文

jquery将网页html文档导出为pdf图片

jquery将网页html文档导出为pdf图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页截图测试</title>
</head>
<body><div id="layout-wrapper"><h4 id="import">导出</h4></div><script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script><script src="../../js/jquery-3.2.1.min.js"></script><script>$(document).ready(function () {function exportToPDF() {// 获取你想要转换为 PDF 的 DOM 元素var element = document.getElementById('layout-wrapper');// 使用 html2canvas 把 DOM 转换成 canvashtml2canvas(element, {allowTaint: true,useCORS: true, // 如果包含跨域图片,需要开启 CORS 支持}).then((canvas) => {// 将 canvas 转换为图像数据const imgData = canvas.toDataURL('image/jpeg', 1.0); // 或者 'image/png'// 初始化一个新的 jsPDF 对象const pdf = new jsPDF();// 添加图像到 PDF 文档中pdf.addImage(imgData, 'JPEG', 10, 10, 180, 160, undefined, 'FAST'); // 图片位置与尺寸可调整// 保存 PDF 文件pdf.save('output.pdf');});}// 调用函数并设定PDF文件名// exportPageToPDF('MyWebpage');$("#import").click(function () {exportToPDF();})})</script>
</body>
</html>
http://www.lryc.cn/news/303535.html

相关文章:

  • opengl 学习着色器
  • 【数据结构】18 二叉搜索树(查找,插入,删除)
  • 力扣日记2.20-【回溯算法篇】491. 非递减子序列
  • Android 13.0 SystemUI下拉状态栏定制二 锁屏页面横竖屏解锁图标置顶显示功能实现
  • FPGA_简单工程_拨码开关
  • LaunchPad 市场的复苏,Penpad 成新兴生力军
  • 知识图谱实战应用30-基于py2neo的天文学中的恒星、行星与卫星之间的关系知识图谱研究与应用
  • 笔试题详解(C语言进阶)
  • ClickHouse快速上手
  • 蓝桥杯DP算法——背包问题(C++)
  • 【LeetCode+JavaGuide打卡】Day22|235. 二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点
  • Stable Diffusion WebUI 界面介绍
  • Cocos2dx-lua ScrollView[一]基础篇
  • QT应用软件【协议篇】周立功CAN接口卡代码示例
  • JVM对象的创建流程与内存分配
  • docker (六)-进阶篇-数据持久化最佳实践MySQL部署
  • 力扣题目训练(17)
  • 【react】react中和vue中的provide/inject、context写法示例
  • MySQL 的存储引擎(基本介绍)
  • Unity3D 实现基于物理引擎的绳子关节解析详解
  • C语言二级易忘易错易混知识点(自用)
  • js_三种方法实现深拷贝
  • 【图论经典题目讲解】CF715B - Complete The Graph
  • [office] excel中数据汇总的大全教程文字版 #知识分享#经验分享#知识分享
  • leetcode经典题库(简单)
  • python coding with ChatGPT 打卡第21天| 二叉树:最近公共祖先
  • openGauss学习笔记-224 openGauss性能调优-系统调优-数据库系统参数调优-数据库并发队列参数调优
  • UE5 C++ 创建可缩放的相机
  • Fabric中的溯源方法
  • 混子文章|蓝桥杯一题 -平方差